Плеер фильмов

Поиск фильмов и сериалов:

ID Кинопоиска:

Киносправочник

Поиск информации о фильме...

Найдите информацию о любом фильме

Введите название фильма в поле выше, чтобы получить подробную информацию, включая описание, рейтинг, актерский состав и многое другое. Примеры для поиска: "Мстители", "Интерстеллар", "Остров проклятых"

Название фильма

Рейтинг: 0.0

Описание фильма будет загружено здесь...

Актерский состав

Кинопоиск Трейлер

Настройки пользователя

Настройте параметры вашего профиля

Имя пользователя

👤

Добро пожаловать, Посетитель Oink Platforms!

Загрузка данных о погоде...

Город

Дата

0°C

Описание погоды

Ощущается как

0°C

Влажность

0%

Ветер

0 км/ч

Давление

0 hPa

0

Источники

0

Подписки

Московское время:

Платформа станет не доступна через:

иза технического рестарта чтобы оптимизировать работу платформы. Платформа будет не доступна ровно 5:00 по МСК

Статус: Ожидание 5:00 по московскому времени

Вкусное за Выгодой

Нажми на кнопку и выиграй крутой приз!

Открой рулетку я верю ты выбьеш крутой дроп!

Нажми кнопку!

Получи промокод или игровой приз

0

Попыток

0

Призов

Мои призы

Ultra Поиск — Узнай что скрывает весь интернет (Сервис)

0

OinkPL - Платформа сервисов

Создавайте, публикуйте и используйте разнообразные сервисы в одной экосистеме. Ваше воображение - единственный предел.

Создать новый сервис

🎨 Библиотека Готовых Шаблонов

Выбирай, открывай и редактируй под себя!

Сервис OinkPL

1

Название сервиса

Описание сервиса

<!DOCTYPE html>

<html>

<head>

<title>Змейка</title>

<style>

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #1a1a2e;

font-family: Arial;

}

canvas {

border: 4px solid #0f3460;

border-radius: 10px;

box-shadow: 0 0 20px rgba(15,52,96,0.5);

}

.score {

position: absolute;

top: 20px;

color: #fff;

font-size: 24px;

}

</style>

</head>

<body>

const c = document.getElementById('c');

const ctx = c.getContext('2d');

const s = 20;

const t = c.width / s;

let snake = [{x:10, y:10}];

let food = {x:15, y:15};

let dx = 0, dy = 0;

let score = 0;

function draw() {

ctx.fillStyle = '#1a1a2e';

ctx.fillRect(0, 0, c.width, c.height);

const h = {x: snake[0].x + dx, y: snake[0].y + dy};

snake.unshift(h);

if (h.x === food.x && h.y === food.y) {

score++;

document.getElementById('score').textContent = score;

food = {x: Math.floor(Math.random()*t), y: Math.floor(Math.random()*t)};

} else {

snake.pop();

}

snake.forEach((p, i) => {

ctx.fillStyle = i === 0 ? '#4CAF50' : '#81C784';

ctx.fillRect(p.x * s, p.y * s, s - 2, s - 2);

});

ctx.fillStyle = '#FF5252';

ctx.fillRect(food.x * s, food.y * s, s - 2, s - 2);

if (h.x < 0 || h.x >= t || h.y < 0 || h.y >= t || snake.slice(1).some(p => p.x === h.x && p.y === h.y)) {

alert('Игра окончена! Счет: ' + score);

snake = [{x:10, y:10}];

dx = 0;

dy = 0;

score = 0;

document.getElementById('score').textContent = score;

}

document.addEventListener('keydown', e => {

if (e.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -1; }

if (e.key === 'ArrowDown' && dy === 0) { dx = 0; dy = 1; }

if (e.key === 'ArrowLeft' && dx === 0) { dx = -1; dy = 0; }

if (e.key === 'ArrowRight' && dx === 0) { dx = 1; dy = 0; }

});

setInterval(draw, 100);

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Калькулятор</title>

<style>

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #667eea, #764ba2);

font-family: Arial;

}

.calc {

width: 320px;

background: #1e1e1e;

border-radius: 20px;

box-shadow: 0 20px 60px rgba(0,0,0,0.5);

overflow: hidden;

}

.display {

padding: 30px 20px;

text-align: right;

background: #2d2d2d;

color: #fff;

min-height: 80px;

}

.prev {

font-size: 16px;

color: #888;

margin-bottom: 10px;

}

.curr {

font-size: 36px;

font-weight: bold;

}

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 1px;

background: #000;

}

button {

border: none;

padding: 25px;

font-size: 20px;

cursor: pointer;

background: #2d2d2d;

color: #fff;

}

button:hover {

background: #3d3d3d;

}

.op {

background: #ff9500;

}

.eq {

background: #4CAF50;

}

.cl {

background: #f44336;

}

.zero {

grid-column: span 2;

}

</style>

</head>

<body>

</div>

</div>

let c = '0', p = '', o = null;

function upd() {

document.getElementById('curr').textContent = c;

document.getElementById('prev').textContent = p + (o || '');

}

function append(n) {

if (c === '0' && n !== '.') {

c = n;

} else if (!(n === '.' && c.includes('.'))) {

c += n;

}

upd();

}

function setOp(op) {

if (o && p) calc();

o = op;

p = c;

c = '0';

upd();

}

function calc() {

if (!o || !p) return;

const a = parseFloat(p), b = parseFloat(c);

let r;

switch(o) {

case '+': r = a + b; break;

case '-': r = a - b; break;

case '*': r = a * b; break;

case '/': r = a / b; break;

}

c = r.toString();

o = null;

p = '';

upd();

}

function clearC() {

c = '0';

p = '';

o = null;

upd();

}

function del() {

c = c.slice(0, -1) || '0';

upd();

}

upd();

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial;

background: linear-gradient(135deg, #667eea, #764ba2);

min-height: 100vh;

padding: 20px;

}

.container {

max-width: 600px;

margin: 0 auto;

}

h1 {

color: #fff;

text-align: center;

margin: 40px 0;

font-size: 48px;

}

.input-container {

display: flex;

gap: 10px;

margin-bottom: 30px;

}

input {

flex: 1;

padding: 15px;

border: none;

border-radius: 10px;

font-size: 16px;

}

button {

padding: 15px 30px;

border: none;

border-radius: 10px;

font-size: 16px;

font-weight: bold;

cursor: pointer;

background: #4CAF50;

color: #fff;

}

.todo-list {

background: #fff;

border-radius: 15px;

padding: 20px;

}

.todo-item {

display: flex;

align-items: center;

gap: 15px;

padding: 15px;

margin: 10px 0;

background: #f5f5f5;

border-radius: 10px;

}

.todo-item.done {

opacity: 0.6;

}

.todo-item.done .txt {

text-decoration: line-through;

}

.txt {

flex: 1;

color: #333;

}

.del {

background: #f44336;

color: #fff;

padding: 8px 15px;

border: none;

border-radius: 5px;

cursor: pointer;

}

</style>

</head>

<body>

</div>

</div>

let todos = JSON.parse(localStorage.getItem('todos') || '[]');

function render() {

document.getElementById('list').innerHTML = todos.map((t, i) => `

</div>

`).join('');

}

function add() {

const inp = document.getElementById('inp');

const text = inp.value.trim();

if (text) {

todos.push({text, done: false});

inp.value = '';

save();

}

function toggle(i) {

todos[i].done = !todos[i].done;

save();

}

function remove(i) {

todos.splice(i, 1);

save();

}

function save() {

localStorage.setItem('todos', JSON.stringify(todos));

render();

}

render();

</script>

</body>

</html>

// Глобальные переменные

let playerSources = [

{ id: 'source1', name: 'Основной плеер', url: 'https://api1690380040.atomics.ws/embed/kp/' },

{ id: 'source2', name: 'Альтернативный 1', url: 'https://www.kinopoisk.one/film/' },

{ id: 'source3', name: 'Основной плеер', url: 'https://5414e3c9.obrut.show/embed/kDN?kinopoisk_id=' },

{ id: 'source4', name: 'Альтернативный 2', url: 'https://api.embess.ws/embed/kp/' },

{ id: 'source5', name: 'Основной плеер', url: 'https://www.kinopoisk.one/serial/' },

{ id: 'source6', name: 'Альтернативный 3', url: 'https://www.kinopoisk.vip/serial/' },

{ id: 'source7', name: 'Основной плеер', url: 'https://api.atomics.ws/embed/movie/' },

{ id: 'source8', name: 'Альтернативный 4', url: 'https://ddbb.lol/?id=' },

{ id: 'source9', name: 'Альтернативный 5', url: 'https://www.kinopoisk.vip/film/' },

{ id: 'source10', name: 'Альтернативный 6', url: 'https://api.namy.ws/embed/movie/' }

];

let currentPlayerSource = playerSources[0];

// Инициализация при загрузке страницы

window.onload = function() {

checkUrlForFilmId();

// Задержка для частиц

const particles = document.querySelectorAll('.particle');

particles.forEach(particle => {

const delay = Math.random() * 5;

particle.style.animationDelay = `${delay}s`;

});

// Обработка нажатия Enter в поле поиска

document.getElementById('searchInput')?.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

searchContent();

}

});

// Загружаем популярные фильмы при загрузке страницы

loadPopularMovies();

};

// Функция для открытия плеера

function openPlayer() {

let kpId = document.getElementById("kpIdInput").value;

if (!kpId) {

alert("Пожалуйста, введите ID Кинопоиска");

return;

}

// Обновляем URL в адресной строке

window.history.pushState({}, '', `/film/${kpId}`);

let iframeSrc = currentPlayerSource.url + kpId;

document.getElementById("playerIframe").src = iframeSrc;

document.getElementById("playerModal").style.display = "flex";

}

// Функция для закрытия плеера

function closePlayer() {

document.getElementById("playerModal").style.display = "none";

document.getElementById("playerIframe").src = ""; // Очищаем iframe при закрытии

// Возвращаем исходный URL

window.history.pushState({}, '', '/');

}

// Функция для выбора источника плеера

function selectPlayerSource(sourceId) {

const source = playerSources.find(s => s.id === sourceId);

if (source) {

currentPlayerSource = source;

// Обновляем активный класс у кнопок

document.querySelectorAll('.source-btn').forEach(btn => {

btn.classList.remove('active');

});

document.querySelector(`.source-btn[data-source="${sourceId}"]`).classList.add('active');

// Если плеер открыт, обновляем источник

if (document.getElementById("playerModal").style.display === "flex") {

let kpId = document.getElementById("kpIdInput").value;

if (kpId) {

let iframeSrc = currentPlayerSource.url + kpId;

document.getElementById("playerIframe").src = iframeSrc;

}

// Функция для поиска фильмов/сериалов по названию

async function searchContent() {

const searchInput = document.getElementById("searchInput").value.trim();

const resultsContainer = document.getElementById("searchResults");

if (!searchInput) {

alert("Пожалуйста, введите название фильма или сериала");

return;

}

// Показываем индикатор загрузки

resultsContainer.innerHTML = '<div class="loading">Поиск...</div>';

try {

const apiUrl = `https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=${encodeURIComponent(searchInput)}&page=1`;

const response = await fetch(apiUrl, {

headers: {

'X-API-KEY': '960dc4e3-9eae-4072-8f0c-98a5ed6c0d2a',

'Content-Type': 'application/json',

}

});

if (!response.ok) {

throw new Error('Ошибка при поиске. Статус: ' + response.status);

}

const data = await response.json();

displayResults(data.films);

} catch (error) {

console.error('Ошибка:', error);

resultsContainer.innerHTML = '<div class="error">Произошла ошибка при поиске. Попробуйте еще раз.</div>';

}

// Функция для отображения результатов поиска

function displayResults(films) {

const resultsContainer = document.getElementById("searchResults");

if (!films || films.length === 0) {

resultsContainer.innerHTML = '<div class="no-results">Ничего не найдено</div>';

return;

}

let html = '<div class="results-title">Результаты поиска:</div>';

films.slice(0, 5).forEach(film => {

html += `

</div>

<div class="film-title">${film.nameRu || film.nameEn}</div>

<div class="film-year">${film.year || 'Год неизвестен'}</div>

<div class="film-rating">Рейтинг: ${film.rating || 'нет'}</div>

</div>

`;

});

resultsContainer.innerHTML = html;

}

// Функция для выбора фильма из результатов поиска

function selectFilm(filmId, filmTitle) {

document.getElementById("kpIdInput").value = filmId;

document.getElementById("selectedFilm").textContent = `Выбран: ${filmTitle} (ID: ${filmId})`;

document.getElementById("searchResults").innerHTML = '';

document.getElementById("searchInput").value = '';

}

// Функция для очистки результатов поиска

function clearSearch() {

document.getElementById("searchResults").innerHTML = '';

document.getElementById("searchInput").value = '';

}

// Проверка URL на наличие ID фильма

function checkUrlForFilmId() {

const path = window.location.pathname;

const filmIdMatch = path.match(/\/film\/(\d+)/);

if (filmIdMatch && filmIdMatch[1]) {

const filmId = filmIdMatch[1];

document.getElementById("kpIdInput").value = filmId;

openPlayer();

}

// Функции для Киносправочника

async function searchMovieInfo() {

const query = document.getElementById('movieSearchInput').value.trim();

if (query.length < 1) return;

// Показать loader

document.getElementById('movieLoader').style.display = 'block';

document.getElementById('movieContentContainer').style.display = 'none';

document.getElementById('movieInitialMessage').style.display = 'none';

try {

// Токен API Кинопоиска

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

// Выполняем поиск через API Кинопоиска

const searchResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/search?page=1&limit=1&query=${encodeURIComponent(query)}`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!searchResponse.ok) {

throw new Error('Ошибка при поиске фильма');

}

const searchData = await searchResponse.json();

if (searchData.docs && searchData.docs.length > 0) {

const movieId = searchData.docs[0].id;

// Получаем детальную информацию о фильме

const movieResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/${movieId}`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!movieResponse.ok) {

throw new Error('Ошибка при получении информации о фильме');

}

const movieData = await movieResponse.json();

// Заполняем данные о фильме

document.getElementById('moviePoster').src = movieData.poster?.url || 'https://via.placeholder.com/400x600/121212/ffffff?text=Нет+постера';

document.getElementById('movieTitle').textContent = movieData.name || movieData.alternativeName || 'Название неизвестно';

// Очистка и заполнение мета-информации

const movieMeta = document.getElementById('movieMeta');

movieMeta.innerHTML = '';

if (movieData.year) movieMeta.innerHTML += `<span>${movieData.year}</span>`;

if (movieData.ageRating) movieMeta.innerHTML += `<span>${movieData.ageRating}+</span>`;

if (movieData.genres && movieData.genres.length > 0) {

movieData.genres.slice(0, 3).forEach(genre => {

movieMeta.innerHTML += `<span>${genre.name}</span>`;

});

}

if (movieData.movieLength) {

const hours = Math.floor(movieData.movieLength / 60);

const minutes = movieData.movieLength % 60;

movieMeta.innerHTML += `<span>${hours}ч ${minutes}м</span>`;

}

document.getElementById('movieRatingValue').textContent = movieData.rating?.kp ? movieData.rating.kp.toFixed(1) : 'Н/Д';

document.getElementById('movieDescription').textContent = movieData.description || 'Описание отсутствует';

// Заполняем актерский состав

const castContainer = document.getElementById('movieCastContainer');

castContainer.innerHTML = '';

if (movieData.persons && movieData.persons.length > 0) {

const actors = movieData.persons.filter(person => person.enProfession === 'actor').slice(0, 10);

if (actors.length > 0) {

actors.forEach(actor => {

castContainer.innerHTML += `

<div class="cast-name">${actor.name || 'Неизвестно'}</div>

<div class="cast-role">${actor.description || 'Актер'}</div>

</div>

`;

});

} else {

castContainer.innerHTML = 'Информация об актерах отсутствует';

}

} else {

castContainer.innerHTML = 'Информация об актерах отсутствует';

}

// Устанавливаем ссылки на кнопки

document.getElementById('movieKinopoiskBtn').setAttribute('data-url', `https://www.kinopoisk.ru/film/${movieId}/`);

if (movieData.videos && movieData.videos.trailers && movieData.videos.trailers.length > 0) {

document.getElementById('movieTrailerBtn').setAttribute('data-url', movieData.videos.trailers[0].url);

} else {

document.getElementById('movieTrailerBtn').removeAttribute('data-url');

}

// Скрыть loader и показать контент

document.getElementById('movieLoader').style.display = 'none';

document.getElementById('movieContentContainer').style.display = 'grid';

// Загружаем похожие фильмы

loadSimilarMovies(movieId);

} else {

throw new Error('Фильм не найден');

}

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('movieLoader').style.display = 'none';

document.getElementById('movieInitialMessage').style.display = 'block';

document.getElementById('movieInitialMessage').innerHTML = `

<h2>Произошла ошибка</h2>

${error.message}

Попробуйте другой запрос или повторите попытку позже.

`;

}

// Функции для погоды

async function getWeatherByLocation() {

updateWeatherUI("Определение местоположения...");

if (!navigator.geolocation) {

updateWeatherUI("Геолокация не поддерживается вашим браузером");

return;

}

navigator.geolocation.getCurrentPosition(

async (position) => {

const lat = position.coords.latitude;

const lon = position.coords.longitude;

await fetchWeatherByCoords(lat, lon);

},

async (error) => {

console.error('Ошибка геолокации:', error);

updateWeatherUI("Не удалось определить местоположение. Разрешите доступ к геолокации или выберите город вручную.");

},

{

enableHighAccuracy: true,

timeout: 10000,

maximumAge: 60000

}

);

}

async function fetchWeatherByCoords(lat, lon) {

try {

updateWeatherUI("Получение данных о погоде...");

// Получаем данные о погоде

const response = await fetch(

`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,rain,showers,snowfall,weather_code,pressure_msl,surface_pressure,wind_speed_10m,wind_direction_10m&timezone=auto`

);

if (!response.ok) {

throw new Error('Ошибка получения данных о погоде');

}

const data = await response.json();

// Получаем название города по координатам

const cityName = await getCityName(lat, lon);

displayWeatherData(data, cityName);

} catch (error) {

console.error('Ошибка получения погоды:', error);

updateWeatherUI("Не удалось получить данные о погоде. Проверьте подключение к интернету.");

}

async function getWeatherByCity(city) {

try {

updateWeatherUI(`Поиск города ${city}...`);

// Сначала получаем координаты города

const geoResponse = await fetch(

`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=ru&format=json`

);

if (!geoResponse.ok) {

throw new Error('Ошибка поиска города');

}

const geoData = await geoResponse.json();

if (!geoData.results || geoData.results.length === 0) {

throw new Error('Город не найден');

}

const location = geoData.results[0];

await fetchWeatherByCoords(location.latitude, location.longitude);

} catch (error) {

console.error('Ошибка получения погоды по городу:', error);

updateWeatherUI("Не удалось найти город или получить данные о погоде.");

}

async function getCityName(lat, lon) {

try {

const response = await fetch(

`https://geocoding-api.open-meteo.com/v1/reverse?latitude=${lat}&longitude=${lon}&language=ru&format=json`

);

if (response.ok) {

const data = await response.json();

if (data.results && data.results.length > 0) {

return data.results[0].name;

}

} catch (error) {

console.error('Ошибка получения названия города:', error);

}

return `Широта: ${lat.toFixed(2)}, Долгота: ${lon.toFixed(2)}`;

}

function displayWeatherData(data, cityName) {

const current = data.current;

const temp = Math.round(current.temperature_2m);

const apparentTemp = Math.round(current.apparent_temperature);

const humidity = current.relative_humidity_2m;

const windSpeed = current.wind_speed_10m;

const pressure = Math.round(current.pressure_msl);

const weatherCode = current.weather_code;

const weatherIcon = document.getElementById('weatherIcon');

const weatherTemp = document.getElementById('weatherTemp');

const weatherDesc = document.getElementById('weatherDesc');

const weatherLocation = document.getElementById('weatherLocation');

const weatherHumidity = document.getElementById('weatherHumidity');

const weatherWind = document.getElementById('weatherWind');

const weatherPressure = document.getElementById('weatherPressure');

// Обновляем основную информацию

weatherTemp.textContent = `${temp}°C`;

weatherDesc.textContent = `${getWeatherDescription(weatherCode)} (ощущается как ${apparentTemp}°C)`;

weatherLocation.textContent = cityName;

weatherHumidity.textContent = `${humidity}%`;

weatherWind.textContent = `${windSpeed} м/с`;

weatherPressure.textContent = `${pressure} гПа`;

weatherIcon.textContent = getWeatherIcon(weatherCode);

// Проверяем наличие неблагоприятных погодных условий

const alerts = checkWeatherAlerts(current, weatherCode);

displayWeatherAlerts(alerts);

}

function updateWeatherUI(message) {

const weatherDesc = document.getElementById('weatherDesc');

weatherDesc.textContent = message;

}

function getWeatherDescription(code) {

const weatherCodes = {

0: 'Ясно',

1: 'Преимущественно ясно',

2: 'Переменная облачность',

3: 'Пасмурно',

45: 'Туман',

48: 'Туман с инеем',

51: 'Легкая морось',

53: 'Умеренная морось',

55: 'Сильная морось',

56: 'Легкая ледяная морось',

57: 'Сильная ледяная морось',

61: 'Небольшой дождь',

63: 'Умеренный дождь',

65: 'Сильный дождь',

66: 'Легкий ледяной дождь',

67: 'Сильный ледяной дождь',

71: 'Небольшой снег',

73: 'Умеренный снег',

75: 'Сильный снег',

77: 'Снежные зерна',

80: 'Небольшие ливни',

81: 'Умеренные ливни',

82: 'Сильные ливни',

85: 'Небольшие снегопады',

86: 'Сильные снегопады',

95: 'Гроза',

96: 'Гроза с небольшим градом',

99: 'Гроза с сильным градом'

};

return weatherCodes[code] || 'Неизвестно';

}

function getWeatherIcon(code) {

if (code === 0) return '☀️';

if (code <= 2) return '🌤️';

if (code <= 3) return '☁️';

if (code <= 48) return '🌫️';

if (code <= 67) return '🌧️';

if (code <= 77) return '❄️';

if (code <= 82) return '🌧️';

if (code <= 86) return '❄️';

if (code <= 99) return '⛈️';

return '🌤️';

}

function checkWeatherAlerts(current, weatherCode) {

const alerts = [];

const temp = current.temperature_2m;

const windSpeed = current.wind_speed_10m;

const rain = current.rain || 0;

const showers = current.showers || 0;

const snowfall = current.snowfall || 0;

// Проверяем на дождь

if (rain > 0 || showers > 0) {

alerts.push({

type: 'rain',

message: 'Ожидается дождь. Возьмите зонт!',

icon: '🌧️',

title: 'Дождь'

});

}

// Проверяем на снег

if (snowfall > 0) {

alerts.push({

type: 'snow',

message: 'Ожидается снег. Будьте осторожны на дорогах!',

icon: '❄️',

title: 'Снег'

});

}

// Проверяем на грозу

if (weatherCode >= 95) {

alerts.push({

type: 'storm',

message: 'Ожидается гроза. Оставайтесь в помещении!',

icon: '⛈️',

title: 'Гроза'

});

}

// Проверяем на сильный ветер

if (windSpeed > 15) {

alerts.push({

type: 'warning',

message: 'Сильный ветер. Будьте осторожны!',

icon: '💨',

title: 'Сильный ветер'

});

}

// Проверяем на экстремальные температуры

if (temp < -10) {

alerts.push({

type: 'warning',

message: 'Сильный мороз. Одевайтесь теплее!',

icon: '🥶',

title: 'Сильный мороз'

});

} else if (temp > 35) {

alerts.push({

type: 'warning',

message: 'Сильная жара. Пейте больше воды!',

icon: '🥵',

title: 'Сильная жара'

});

}

return alerts;

}

function displayWeatherAlerts(alerts) {

const weatherAlerts = document.getElementById('weatherAlerts');

if (alerts.length === 0) {

weatherAlerts.innerHTML = '<div class="no-alerts">Нет активных предупреждений</div>';

return;

}

let alertsHTML = '';

alerts.forEach(alert => {

alertsHTML += `

<div class="alert-icon ${'alert-' + alert.type}">${alert.icon}</div>

<div>${alert.message}</div>

</div>

`;

});

weatherAlerts.innerHTML = alertsHTML;

}

// Переключение между функциями

function showSection(sectionId) {

// Скрыть все секции

document.querySelectorAll('.function-section').forEach(section => {

section.style.display = 'none';

});

// Показать выбранную секцию

document.getElementById(sectionId).style.display = 'block';

// Обновить активную кнопку

document.querySelectorAll('.nav-btn').forEach(btn => {

btn.classList.remove('active');

});

document.querySelector(`.nav-btn[data-section="${sectionId}"]`).classList.add('active');

// Автоматически загрузить погоду при переключении на погоду

if (sectionId === 'weatherSection') {

getWeatherByLocation();

}

// Загрузить популярные фильмы при переключении на плеер

if (sectionId === 'playerSection') {

loadPopularMovies();

}

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка популярных фильмов

async function loadPopularMovies() {

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const response = await fetch('https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&lists=popular-films', {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка загрузки популярных фильмов');

}

const data = await response.json();

displayPopularMovies(data.docs);

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('popularMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить популярные фильмы</div>';

}

// Отображение популярных фильмов

function displayPopularMovies(movies) {

const container = document.getElementById('popularMoviesContainer');

if (!movies || movies.length === 0) {

container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';

return;

}

let html = '<div class="section-subtitle">Популярные фильмы</div><div class="movies-grid">';

movies.forEach(movie => {

html += `

</div>

<div class="movie-card-title">${movie.name || movie.alternativeName}</div>

<div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>

<div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка топ-фильмов

async function loadTopMovies() {

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const response = await fetch('https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&selectFields=id&selectFields=name&selectFields=year&selectFields=rating&selectFields=poster&sortField=rating.kp&sortType=-1', {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка загрузки топ-фильмов');

}

const data = await response.json();

displayTopMovies(data.docs);

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('topMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить топ-фильмы</div>';

}

// Отображение топ-фильмов

function displayTopMovies(movies) {

const container = document.getElementById('topMoviesContainer');

if (!movies || movies.length === 0) {

container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';

return;

}

let html = '<div class="section-subtitle">Топ фильмов по рейтингу</div><div class="movies-grid">';

movies.forEach(movie => {

html += `

</div>

<div class="movie-card-title">${movie.name || movie.alternativeName}</div>

<div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>

<div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка ожидаемых новинок

async function loadUpcomingMovies() {

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const currentYear = new Date().getFullYear();

const response = await fetch(`https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&year=${currentYear}&status=filming`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка загрузки ожидаемых новинок');

}

const data = await response.json();

displayUpcomingMovies(data.docs);

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('upcomingMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить ожидаемые новинки</div>';

}

// Отображение ожидаемых новинок

function displayUpcomingMovies(movies) {

const container = document.getElementById('upcomingMoviesContainer');

if (!movies || movies.length === 0) {

container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';

return;

}

let html = '<div class="section-subtitle">Ожидаемые новинки</div><div class="movies-grid">';

movies.forEach(movie => {

html += `

</div>

<div class="movie-card-title">${movie.name || movie.alternativeName}</div>

<div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>

<div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка похожих фильмов

async function loadSimilarMovies(movieId) {

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const response = await fetch(`https://api.kinopoisk.dev/v1.4/movie/${movieId}/similar`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка загрузки похожих фильмов');

}

const data = await response.json();

displaySimilarMovies(data.docs);

} catch (error) {

console.error('Ошибка:', error);

// Не показываем ошибку, так как похожие фильмы - дополнительная функция

}

// Отображение похожих фильмов

function displaySimilarMovies(movies) {

const container = document.getElementById('similarMoviesContainer');

if (!movies || movies.length === 0) {

container.innerHTML = '';

return;

}

let html = '<div class="section-subtitle">Похожие фильмы</div><div class="movies-grid">';

movies.slice(0, 5).forEach(movie => {

html += `

</div>

<div class="movie-card-title">${movie.name || movie.alternativeName}</div>

<div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>

<div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

// НОВЫЙ ФУНКЦИОНАЛ: Поиск актеров и режиссеров

async function searchPerson() {

const query = document.getElementById('personSearchInput').value.trim();

if (!query) {

alert('Пожалуйста, введите имя актера или режиссера');

return;

}

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const response = await fetch(`https://api.kinopoisk.dev/v1.4/person/search?page=1&limit=10&query=${encodeURIComponent(query)}`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка поиска персоны');

}

const data = await response.json();

displayPersonResults(data.docs);

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('personResultsContainer').innerHTML = '<div class="error">Не удалось выполнить поиск</div>';

}

// Отображение результатов поиска персон

function displayPersonResults(persons) {

const container = document.getElementById('personResultsContainer');

if (!persons || persons.length === 0) {

container.innerHTML = '<div class="no-results">Ничего не найдено</div>';

return;

}

let html = '<div class="section-subtitle">Результаты поиска</div><div class="persons-grid">';

persons.forEach(person => {

html += `

</div>

<div class="person-name">${person.name || 'Неизвестно'}</div>

<div class="person-profession">${person.enProfession || 'Актер'}</div>

<div class="person-movies">Фильмов: ${person.movies ? person.movies.length : 0}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

</script>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background: #0a0a0a;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

padding: 20px;

position: relative;

color: #fff;

}

/* Анимированный фон */

body::before {

content: '';

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 25% 25%, #4CAF50 0%, transparent 50%),

radial-gradient(circle at 75% 75%, #00BCD4 0%, transparent 50%),

radial-gradient(circle at 50% 50%, #9C27B0 0%, transparent 50%);

filter: blur(120px);

opacity: 0.4;

animation: backgroundShift 12s ease-in-out infinite alternate;

z-index: -1;

}

@keyframes backgroundShift {

0% { transform: scale(1) rotate(0deg); }

100% { transform: scale(1.1) rotate(8deg); }

}

@keyframes float {

0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }

10% { opacity: 1; }

90% { opacity: 1; }

100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }

}

/* Контейнер для содержимого */

.container {

display: flex;

flex-direction: column;

align-items: center;

gap: 25px;

z-index: 10;

width: 100%;

max-width: 1200px;

}

/* Заголовок приложения */

.app-header {

text-align: center;

margin-bottom: 20px;

}

.app-title {

font-size: 42px;

font-weight: 800;

background: linear-gradient(135deg, #4CAF50, #00BCD4, #9C27B0);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 10px;

}

.app-subtitle {

font-size: 18px;

color: rgba(255, 255, 255, 0.8);

}

/* Основной интерфейс */

.main-interface {

display: block;

width: 100%;

}

/* Навигация по функциям */

.nav-buttons {

display: flex;

gap: 10px;

margin-bottom: 20px;

justify-content: center;

flex-wrap: wrap;

}

.nav-btn {

padding: 12px 20px;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 25px;

color: rgba(255, 255, 255, 0.8);

cursor: pointer;

transition: all 0.3s ease;

font-size: 14px;

font-weight: 500;

backdrop-filter: blur(10px);

}

.nav-btn:hover {

background: rgba(255, 255, 255, 0.12);

border-color: rgba(255, 255, 255, 0.25);

transform: translateY(-2px);

}

.nav-btn.active {

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border-color: transparent;

color: white;

box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);

}

/* Секции функций */

.function-section {

background: rgba(30, 30, 30, 0.7);

backdrop-filter: blur(40px);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 28px;

width: 100%;

padding: 35px;

position: relative;

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

}

.function-section::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 3px;

background: linear-gradient(90deg, #4CAF50, #00BCD4, #9C27B0, #4CAF50);

background-size: 400% 100%;

animation: gradientMove 4s linear infinite;

border-radius: 28px 28px 0 0;

}

/* Секция плеера */

.section-title {

font-size: 26px;

font-weight: 700;

text-align: center;

margin-bottom: 30px;

background: linear-gradient(135deg, #4CAF50, #00BCD4);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.section-subtitle {

font-size: 20px;

font-weight: 600;

margin-bottom: 20px;

color: #00BCD4;

}

.input-group {

margin-bottom: 20px;

}

.input-label {

display: block;

margin-bottom: 8px;

font-weight: 500;

color: rgba(255, 255, 255, 0.9);

}

.input-field {

width: 100%;

padding: 15px 20px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: white;

font-size: 15px;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

}

.input-field:focus {

outline: none;

border-color: #4CAF50;

background: rgba(255, 255, 255, 0.1);

box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);

}

.search-group {

position: relative;

margin-bottom: 20px;

}

.search-input {

width: 100%;

padding: 15px 50px 15px 20px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: white;

font-size: 15px;

transition: all 0.3s ease;

}

.search-btn {

position: absolute;

right: 10px;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

color: rgba(255, 255, 255, 0.7);

cursor: pointer;

padding: 5px;

}

.search-results {

max-height: 300px;

overflow-y: auto;

margin-bottom: 20px;

border-radius: 15px;

background: rgba(255, 255, 255, 0.05);

padding: 15px;

}

.film-item {

display: flex;

gap: 15px;

padding: 12px;

border-radius: 12px;

cursor: pointer;

transition: all 0.3s ease;

margin-bottom: 10px;

background: rgba(255, 255, 255, 0.05);

}

.film-item:hover {

background: rgba(255, 255, 255, 0.1);

transform: translateY(-2px);

}

.film-poster img {

width: 60px;

height: 90px;

border-radius: 8px;

object-fit: cover;

}

.film-info {

flex: 1;

}

.film-title {

font-weight: 600;

color: white;

margin-bottom: 5px;

}

.film-year, .film-rating {

font-size: 13px;

color: rgba(255, 255, 255, 0.7);

}

.selected-film {

background: rgba(76, 175, 80, 0.2);

border: 1px solid rgba(76, 175, 80, 0.4);

padding: 12px 20px;

border-radius: 15px;

margin-bottom: 20px;

text-align: center;

color: #4CAF50;

font-weight: 500;

}

.player-sources {

display: flex;

gap: 10px;

margin-bottom: 20px;

flex-wrap: wrap;

justify-content: center;

}

.source-btn {

padding: 10px 15px;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: rgba(255, 255, 255, 0.8);

cursor: pointer;

transition: all 0.3s ease;

font-size: 13px;

}

.source-btn:hover {

background: rgba(255, 255, 255, 0.12);

}

.source-btn.active {

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border-color: transparent;

color: white;

}

.action-btn {

width: 100%;

padding: 16px;

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border: none;

border-radius: 20px;

color: white;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

margin-top: 10px;

}

.action-btn:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(76, 175, 80, 0.4);

}

/* Сетка фильмов */

.movies-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

gap: 20px;

margin-bottom: 30px;

}

.movie-card {

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

overflow: hidden;

cursor: pointer;

transition: all 0.3s ease;

}

.movie-card:hover {

transform: translateY(-5px);

background: rgba(255, 255, 255, 0.1);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}

.movie-card-poster img {

width: 100%;

height: 250px;

object-fit: cover;

}

.movie-card-info {

padding: 15px;

}

.movie-card-title {

font-weight: 600;

margin-bottom: 5px;

font-size: 14px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.movie-card-year, .movie-card-rating {

font-size: 12px;

color: rgba(255, 255, 255, 0.7);

}

/* Сетка персон */

.persons-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 20px;

margin-bottom: 30px;

}

.person-card {

display: flex;

gap: 15px;

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

padding: 15px;

transition: all 0.3s ease;

}

.person-card:hover {

background: rgba(255, 255, 255, 0.1);

transform: translateY(-3px);

}

.person-photo img {

width: 60px;

height: 60px;

border-radius: 50%;

object-fit: cover;

}

.person-info {

flex: 1;

}

.person-name {

font-weight: 600;

margin-bottom: 5px;

}

.person-profession, .person-movies {

font-size: 13px;

color: rgba(255, 255, 255, 0.7);

}

/* Модальное окно плеера */

.player-modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

z-index: 1000;

align-items: center;

justify-content: center;

padding: 20px;

}

.player-container {

width: 100%;

max-width: 1200px;

height: 80vh;

background: #000;

border-radius: 15px;

overflow: hidden;

position: relative;

}

.player-iframe {

width: 100%;

height: 100%;

border: none;

}

.close-player {

position: absolute;

top: 15px;

right: 15px;

background: rgba(255, 0, 0, 0.8);

color: white;

border: none;

border-radius: 50%;

width: 40px;

height: 40px;

font-size: 20px;

cursor: pointer;

z-index: 1001;

}

/* Анимации */

@keyframes gradientMove {

0% { background-position: 0% 50%; }

100% { background-position: 400% 50%; }

}

/* Стили для Киносправочника */

.movie-search-container {

margin-bottom: 20px;

}

.movie-search-input {

width: 100%;

padding: 15px 20px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: white;

font-size: 15px;

transition: all 0.3s ease;

}

.movie-search-input:focus {

outline: none;

border-color: #4CAF50;

background: rgba(255, 255, 255, 0.1);

}

.movie-loader {

display: none;

text-align: center;

padding: 40px;

color: #00BCD4;

font-size: 16px;

}

.movie-initial-message {

text-align: center;

padding: 40px;

color: rgba(255, 255, 255, 0.7);

}

.movie-content-container {

display: none;

grid-template-columns: 1fr 2fr;

gap: 30px;

align-items: start;

}

.movie-poster-container {

text-align: center;

}

.movie-poster {

width: 100%;

max-width: 300px;

border-radius: 15px;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

}

.movie-info-container {

display: flex;

flex-direction: column;

gap: 20px;

}

.movie-title {

font-size: 28px;

font-weight: 700;

color: white;

line-height: 1.2;

}

.movie-meta {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 10px;

}

.movie-meta span {

background: rgba(255, 255, 255, 0.1);

padding: 5px 12px;

border-radius: 15px;

font-size: 13px;

color: rgba(255, 255, 255, 0.9);

}

.movie-rating {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 15px;

}

.rating-value {

font-size: 24px;

font-weight: 700;

color: #4CAF50;

}

.movie-description {

line-height: 1.6;

color: rgba(255, 255, 255, 0.9);

margin-bottom: 20px;

}

.movie-cast {

margin-top: 20px;

}

.cast-title {

font-size: 18px;

font-weight: 600;

margin-bottom: 15px;

color: white;

}

.cast-container {

display: flex;

gap: 15px;

overflow-x: auto;

padding-bottom: 10px;

}

.cast-member {

flex: 0 0 auto;

text-align: center;

width: 100px;

}

.cast-photo {

width: 80px;

height: 80px;

border-radius: 50%;

object-fit: cover;

margin-bottom: 8px;

}

.cast-name {

font-size: 13px;

font-weight: 500;

color: white;

margin-bottom: 3px;

}

.cast-role {

font-size: 11px;

color: rgba(255, 255, 255, 0.7);

}

.movie-actions {

display: flex;

gap: 10px;

margin-top: 20px;

}

.movie-action-btn {

padding: 10px 20px;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 20px;

color: white;

text-decoration: none;

font-size: 14px;

transition: all 0.3s ease;

cursor: pointer;

}

.movie-action-btn:hover {

background: rgba(255, 255, 255, 0.2);

transform: translateY(-2px);

}

/* Стили для погоды */

.weather-container {

text-align: center;

}

.weather-header {

margin-bottom: 30px;

}

.weather-icon {

font-size: 64px;

margin-bottom: 15px;

animation: weatherIconFloat 3s ease-in-out infinite;

}

@keyframes weatherIconFloat {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

}

.weather-temp {

font-size: 48px;

font-weight: 700;

color: white;

margin-bottom: 10px;

}

.weather-desc {

font-size: 18px;

color: rgba(255, 255, 255, 0.9);

margin-bottom: 5px;

}

.weather-location {

font-size: 16px;

color: rgba(255, 255, 255, 0.7);

margin-bottom: 25px;

}

.weather-details {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 15px;

margin-bottom: 25px;

}

.weather-detail {

background: rgba(255, 255, 255, 0.07);

padding: 15px;

border-radius: 15px;

text-align: center;

}

.detail-label {

font-size: 13px;

color: rgba(255, 255, 255, 0.7);

margin-bottom: 5px;

}

.detail-value {

font-size: 16px;

font-weight: 600;

color: white;

}

.weather-alerts {

margin-top: 25px;

}

.alert-item {

background: rgba(255, 193, 7, 0.15);

border: 1px solid rgba(255, 193, 7, 0.3);

padding: 15px;

border-radius: 15px;

margin-bottom: 10px;

display: flex;

align-items: center;

gap: 12px;

text-align: left;

}

.alert-icon {

font-size: 24px;

flex-shrink: 0;

}

.alert-rain { background: rgba(33, 150, 243, 0.15); border-color: rgba(33, 150, 243, 0.3); }

.alert-snow { background: rgba(176, 190, 197, 0.15); border-color: rgba(176, 190, 197, 0.3); }

.alert-storm { background: rgba(156, 39, 176, 0.15); border-color: rgba(156, 39, 176, 0.3); }

.alert-warning { background: rgba(255, 152, 0, 0.15); border-color: rgba(255, 152, 0, 0.3); }

.no-alerts {

text-align: center;

color: rgba(255, 255, 255, 0.7);

padding: 20px;

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

}

.weather-actions {

display: flex;

gap: 10px;

justify-content: center;

margin-top: 20px;

}

.weather-action-btn {

padding: 10px 20px;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 20px;

color: white;

cursor: pointer;

transition: all 0.3s ease;

}

.weather-action-btn:hover {

background: rgba(255, 255, 255, 0.2);

transform: translateY(-2px);

}

/* Адаптивность */

@media (max-width: 768px) {

.container {

max-width: 100%;

}

.movie-content-container {

grid-template-columns: 1fr;

gap: 20px;

}

.movie-poster {

max-width: 250px;

}

.weather-details {

grid-template-columns: 1fr;

}

.nav-buttons {

flex-direction: column;

align-items: center;

}

.nav-btn {

width: 100%;

text-align: center;

}

.movies-grid {

grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

}

.persons-grid {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h1 class="app-title">KinoPoiskID</h1>

Платформа для просмотра фильмов и сериалов

</div>

<button class="nav-btn active" data-section="playerSection" onclick="showSection('playerSection')">🎬 Плеер фильмов</button>

<button class="nav-btn" data-section="movieSection" onclick="showSection('movieSection')">📚 Киносправочник</button>

<button class="nav-btn" data-section="weatherSection" onclick="showSection('weatherSection')">🌤️ Погода</button>

</div>

<h2 class="section-title">🎬 Плеер фильмов</h2>

<label class="input-label">Поиск фильмов и сериалов:</label>

</div>

</div>

<label class="input-label">ID Кинопоиска:</label>

</div>

<button class="source-btn active" data-source="source1" onclick="selectPlayerSource('source1')">Основной плеер</button>

<button class="source-btn" data-source="source2" onclick="selectPlayerSource('source2')">Альтернативный 1</button>

<button class="source-btn" data-source="source3" onclick="selectPlayerSource('source3')">Альтернативный 2</button>

<button class="source-btn" data-source="source4" onclick="selectPlayerSource('source4')">Альтернативный 3</button>

<button class="source-btn" data-source="source5" onclick="selectPlayerSource('source5')">Альтернативный 4</button>

<button class="source-btn" data-source="source6" onclick="selectPlayerSource('source6')">Альтернативный 5</button>

<button class="source-btn" data-source="source7" onclick="selectPlayerSource('source7')">Альтернативный 6</button>

<button class="source-btn" data-source="source8" onclick="selectPlayerSource('source8')">Альтернативный 7</button>

<button class="source-btn" data-source="source9" onclick="selectPlayerSource('source9')">Альтернативный 8</button>

<button class="source-btn" data-source="source10" onclick="selectPlayerSource('source10')">Альтернативный 9</button>

</div>

<button class="action-btn" onclick="openPlayer()">🎬 Смотреть фильм/сериал</button>

</div>

<button class="action-btn" onclick="loadTopMovies()">🏆 Загрузить топ фильмов</button>

</div>

<button class="action-btn" onclick="loadUpcomingMovies()">🎭 Загрузить ожидаемые новинки</button>

</div>

<label class="input-label">Поиск актеров и режиссеров:</label>

</div>

</div>

<h2 class="section-title">📚 Киносправочник</h2>

<input type="text" id="movieSearchInput" class="movie-search-input"

placeholder="Введите название фильма для поиска информации..."

onkeypress="if(event.key === 'Enter') searchMovieInfo()">

</div>

🔍 Поиск информации о фильме...

</div>

<h3>Найдите информацию о любом фильме</h3>

Введите название фильма в поле выше, чтобы получить подробную информацию, включая описание, рейтинг, актерский состав и многое другое.

</div>

</div>

<h1 id="movieTitle" class="movie-title">Название фильма</h1>

</div>

<span class="rating-label">Рейтинг:</span>

</div>

Описание фильма будет загружено здесь...

<h3 class="cast-title">Актерский состав</h3>

</div>

📖 Кинопоиск

</a>

🎬 Трейлер

</a>

</div>

</div>

<h2 class="section-title">🌤️ Погода</h2>

<div id="weatherDesc" class="weather-desc">Загрузка данных о погоде...</div>

<div id="weatherLocation" class="weather-location">Определение местоположения...</div>

</div>

<div class="detail-label">Влажность</div>

</div>

<div class="detail-label">Ветер</div>

</div>

<div class="detail-label">Давление</div>

</div>

<div class="no-alerts">Нет активных предупреждений</div>

</div>

<button class="weather-action-btn" onclick="getWeatherByLocation()">🔄 Обновить</button>

<button class="weather-action-btn" onclick="getWeatherByCity(prompt('Введите название города:'))">🏙️ Выбрать город</button>

</div>

</div>

// Обработчик для поиска фильмов при нажатии Enter

document.getElementById('movieSearchInput')?.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

searchMovieInfo();

}

});

// Обработчик для закрытия модальных окон при клике вне их

window.onclick = function(event) {

const playerModal = document.getElementById('playerModal');

if (event.target === playerModal) {

closePlayer();

}

</script>

<head>

<title>KinoPoiskID - Просмотр фильмов (Oink Platforms WEB)</title>

</body></html>

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Таймер</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#f093fb,#f5576c);font-family:Arial}.container{text-align:center;background:rgba(255,255,255,0.95);padding:60px 80px;border-radius:30px;box-shadow:0 20px 80px rgba(0,0,0,0.3)}h1{font-size:36px;margin-bottom:40px;color:#333}.timer{font-size:96px;font-weight:bold;margin:40px 0;color:#f5576c}.controls{display:flex;gap:20px;justify-content:center}button{padding:15px 40px;font-size:18px;border:none;border-radius:50px;cursor:pointer;font-weight:bold;transition:all 0.3s}.start{background:#4CAF50;color:#fff}.start:hover{background:#66BB6A}.pause{background:#ff9800;color:#fff}.reset{background:#f44336;color:#fff}</style></head><body><div class="container"><h1>⏱️ Таймер</h1><div class="timer" id="timer">05:00</div><div class="controls"><button class="start" onclick="toggle()">▶ Старт</button><button class="reset" onclick="reset()">↻ Сброс</button></div></div><script>let time=300,running=false,interval;function upd(){const m=Math.floor(time/60),s=time%60;document.getElementById('timer').textContent=\`\${m.toString().padStart(2,'0')}:\${s.toString().padStart(2,'0')}\`}function toggle(){running=!running;const btn=document.querySelector('.start');if(running){btn.textContent='⏸ Пауза';btn.className='pause';interval=setInterval(()=>{if(time>0){time--;upd()}else{reset();alert('Время вышло!')}},1000)}else{btn.textContent='▶ Старт';btn.className='start';clearInterval(interval)}}function reset(){running=false;clearInterval(interval);time=300;upd();document.querySelector('.start').textContent='▶ Старт';document.querySelector('.start').className='start'}upd()</script></body></html>

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Часы</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1e3c72,#2a5298);font-family:Arial;color:#fff}.container{text-align:center}.digital{font-size:72px;font-weight:bold;margin-bottom:40px;text-shadow:0 0 20px rgba(255,255,255,0.5)}canvas{border-radius:50%;background:#fff;box-shadow:0 10px 50px rgba(0,0,0,0.3)}.date{font-size:24px;margin-top:30px;opacity:0.8}</style></head><body><div class="container"><div class="digital" id="digital"></div><canvas id="clock" width="300" height="300"></canvas><div class="date" id="date"></div></div><script>const canvas=document.getElementById('clock'),ctx=canvas.getContext('2d'),radius=canvas.width/2;ctx.translate(radius,radius);function draw(){const now=new Date(),h=now.getHours()%12,m=now.getMinutes(),s=now.getSeconds();ctx.clearRect(-radius,-radius,radius*2,radius*2);ctx.beginPath();ctx.arc(0,0,radius-10,0,2*Math.PI);ctx.fillStyle='#fff';ctx.fill();ctx.strokeStyle='#333';ctx.lineWidth=8;ctx.stroke();[0,1,2,3,4,5,6,7,8,9,10,11].forEach(num=>{const ang=num*Math.PI/6;ctx.beginPath();ctx.arc((radius-30)*Math.sin(ang),(radius-30)*-Math.cos(ang),4,0,2*Math.PI);ctx.fillStyle='#333';ctx.fill()});drawHand((h+m/60+s/3600)*Math.PI/6,radius*0.5,6);drawHand((m+s/60)*Math.PI/30,radius*0.7,4);drawHand(s*Math.PI/30,radius*0.85,2,'#f00');ctx.beginPath();ctx.arc(0,0,8,0,2*Math.PI);ctx.fillStyle='#333';ctx.fill();document.getElementById('digital').textContent=\`\${h.toString().padStart(2,'0')}:\${m.toString().padStart(2,'0')}:\${s.toString().padStart(2,'0')}\`;document.getElementById('date').textContent=now.toLocaleDateString('ru-RU',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}function drawHand(ang,len,width,color='#333'){ctx.beginPath();ctx.lineWidth=width;ctx.lineCap='round';ctx.strokeStyle=color;ctx.moveTo(0,0);ctx.lineTo(len*Math.sin(ang),-len*Math.cos(ang));ctx.stroke()}setInterval(draw,1000);draw()</script></body></html>

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Палитра</title><style>body{margin:0;padding:20px;background:#1a1a1a;font-family:Arial;color:#fff}.container{max-width:800px;margin:0 auto}h1{text-align:center;font-size:42px;margin-bottom:40px}.color-display{width:100%;height:200px;border-radius:20px;margin-bottom:30px;box-shadow:0 10px 40px rgba(0,0,0,0.5);transition:all 0.3s}.controls{background:#2a2a2a;padding:30px;border-radius:20px;margin-bottom:20px}input[type="color"]{width:100%;height:60px;border:none;border-radius:10px;cursor:pointer;margin-bottom:20px}.rgb,.hex{background:#333;padding:15px;border-radius:10px;margin:10px 0;font-size:18px;text-align:center;cursor:pointer}.rgb:hover,.hex:hover{background:#444}.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:15px}.palette-item{height:80px;border-radius:10px;cursor:pointer;transition:all 0.3s;border:3px solid transparent}.palette-item:hover{transform:scale(1.1);border-color:#fff}</style></head><body><div class="container"><h1>🎨 Палитра Цветов</h1><div class="color-display" id="display"></div><div class="controls"><input type="color" id="picker" value="#4CAF50"><div class="hex" id="hex">#4CAF50</div><div class="rgb" id="rgb">rgb(76, 175, 80)</div><button style="width:100%;padding:15px;background:#4CAF50;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:bold;cursor:pointer;margin-top:10px" onclick="random()">🎲 Случайный цвет</button></div><div class="palettes" id="palettes"></div></div><script>const picker=document.getElementById('picker'),display=document.getElementById('display'),hexEl=document.getElementById('hex'),rgbEl=document.getElementById('rgb');function update(){const color=picker.value;display.style.background=color;hexEl.textContent=color.toUpperCase();const r=parseInt(color.substr(1,2),16),g=parseInt(color.substr(3,2),16),b=parseInt(color.substr(5,2),16);rgbEl.textContent=\`rgb(\${r}, \${g}, \${b})\`;generatePalette(color)}function random(){const r=()=>Math.floor(Math.random()*256).toString(16).padStart(2,'0');picker.value='#'+r()+r()+r();update()}function generatePalette(base){const palettes=document.getElementById('palettes');palettes.innerHTML='';for(let i=-2;i<=2;i++){const factor=1+i*0.2;const rgb=hexToRgb(base);const newColor=rgbToHex(Math.min(255,Math.floor(rgb.r*factor)),Math.min(255,Math.floor(rgb.g*factor)),Math.min(255,Math.floor(rgb.b*factor)));const div=document.createElement('div');div.className='palette-item';div.style.background=newColor;div.onclick=()=>{picker.value=newColor;update()};palettes.appendChild(div)}}function hexToRgb(hex){const r=parseInt(hex.substr(1,2),16),g=parseInt(hex.substr(3,2),16),b=parseInt(hex.substr(5,2),16);return{r,g,b}}function rgbToHex(r,g,b){return'#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('')}picker.oninput=update;hexEl.onclick=()=>{navigator.clipboard.writeText(hexEl.textContent);alert('Скопировано!')};rgbEl.onclick=()=>{navigator.clipboard.writeText(rgbEl.textContent);alert('Скопировано!')};update()</script></body></html>

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Частицы</title><style>body{margin:0;overflow:hidden;background:#000}canvas{display:block}.info{position:absolute;top:20px;left:20px;color:#fff;font-family:Arial}</style></head><body><div class="info">Двигай мышью ✨</div><canvas id="c"></canvas><script>const c=document.getElementById('c'),ctx=c.getContext('2d');c.width=innerWidth;c.height=innerHeight;const particles=[],mouse={x:null,y:null};class Particle{constructor(){this.x=Math.random()*c.width;this.y=Math.random()*c.height;this.size=Math.random()*3+1;this.speedX=Math.random()*3-1.5;this.speedY=Math.random()*3-1.5;this.color=\`hsl(\${Math.random()*360},100%,50%)\`}update(){this.x+=this.speedX;this.y+=this.speedY;if(this.x>c.width||this.x<0)this.speedX*=-1;if(this.y>c.height||this.y<0)this.speedY*=-1;if(mouse.x){const dx=mouse.x-this.x,dy=mouse.y-this.y,d=Math.sqrt(dx*dx+dy*dy);if(d<150){this.x-=dx/d*2;this.y-=dy/d*2}}}draw(){ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.size,0,Math.PI*2);ctx.fill()}}for(let i=0;i<150;i++)particles.push(new Particle());function animate(){ctx.fillStyle='rgba(0,0,0,0.05)';ctx.fillRect(0,0,c.width,c.height);particles.forEach(p=>{p.update();p.draw()});requestAnimationFrame(animate)}c.addEventListener('mousemove',e=>{mouse.x=e.x;mouse.y=e.y});c.addEventListener('mouseleave',()=>{mouse.x=null;mouse.y=null});addEventListener('resize',()=>{c.width=innerWidth;c.height=innerHeight});animate()</script></body></html>

}

};=='Enter')add()"><button onclick="add()">➕</button></div><div class="todo-list" id="list"></div></div><script>let todos=JSON.parse(localStorage.getItem('todos')||'[]');function render(){document.getElementById('list').innerHTML=todos.map((t,i)=>\`<div class="todo-item \${t.done?'done':''}"><input type="checkbox" \${t.done?'checked':''} onchange="toggle(\${i})"><div class="txt">\${t.text}</div><button class="del" onclick="remove(\${i})">🗑️</button></div>\`).join('')}function add(){const inp=document.getElementById('inp'),text=inp.value.trim();if(text){todos.push({text,done:false});inp.value='';save()}}function toggle(i){todos[i].done=!todos[i].done;save()}function remove(i){todos.splice(i,1);save()}function save(){localStorage.setItem('todos',JSON.stringify(todos));render()}render()<\/script></body></html>

</html>

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background: #0a0a0a;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

padding: 20px;

position: relative;

color: #fff;

}

/* Анимированный фон */

body::before {

content: '';

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 25% 25%, #4CAF50 0%, transparent 50%),

radial-gradient(circle at 75% 75%, #00BCD4 0%, transparent 50%),

radial-gradient(circle at 50% 50%, #9C27B0 0%, transparent 50%);

filter: blur(120px);

opacity: 0.4;

animation: backgroundShift 12s ease-in-out infinite alternate;

z-index: -1;

}

@keyframes backgroundShift {

0% { transform: scale(1) rotate(0deg); }

100% { transform: scale(1.1) rotate(8deg); }

}

/* Кнопка открытия модального окна */

.open-modal-btn {

padding: 18px 35px;

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border: none;

border-radius: 25px;

color: white;

font-size: 18px;

font-weight: 700;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);

z-index: 10;

display: flex;

align-items: center;

gap: 10px;

}

.open-modal-btn:hover {

transform: translateY(-5px);

box-shadow: 0 15px 40px rgba(76, 175, 80, 0.6);

}

/* Модальное окно */

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

z-index: 1000;

align-items: center;

justify-content: center;

padding: 20px;

overflow-y: auto;

}

.modal-content {

background: rgba(30, 30, 30, 0.95);

backdrop-filter: blur(40px);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 28px;

width: 100%;

max-width: 1000px;

max-height: 90vh;

overflow-y: auto;

position: relative;

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);

}

.modal-content::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 3px;

background: linear-gradient(90deg, #4CAF50, #00BCD4, #9C27B0, #4CAF50);

background-size: 400% 100%;

animation: gradientMove 4s linear infinite;

border-radius: 28px 28px 0 0;

}

.close-modal {

position: absolute;

top: 20px;

right: 20px;

background: rgba(255, 0, 0, 0.8);

color: white;

border: none;

border-radius: 50%;

width: 40px;

height: 40px;

font-size: 20px;

cursor: pointer;

z-index: 1001;

display: flex;

align-items: center;

justify-content: center;

}

.modal-header {

padding: 30px 30px 20px;

text-align: center;

}

.modal-title {

font-size: 32px;

font-weight: 800;

background: linear-gradient(135deg, #4CAF50, #00BCD4, #9C27B0);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 10px;

}

.modal-subtitle {

font-size: 16px;

color: rgba(255, 255, 255, 0.8);

}

.modal-body {

padding: 0 30px 30px;

}

/* Навигация по функциям */

.nav-buttons {

display: flex;

gap: 10px;

margin-bottom: 20px;

justify-content: center;

flex-wrap: wrap;

}

.nav-btn {

padding: 12px 20px;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 25px;

color: rgba(255, 255, 255, 0.8);

cursor: pointer;

transition: all 0.3s ease;

font-size: 14px;

font-weight: 500;

backdrop-filter: blur(10px);

}

.nav-btn:hover {

background: rgba(255, 255, 255, 0.12);

border-color: rgba(255, 255, 255, 0.25);

transform: translateY(-2px);

}

.nav-btn.active {

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border-color: transparent;

color: white;

box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);

}

/* Секции функций */

.function-section {

display: none;

}

.function-section.active {

display: block;

}

.section-title {

font-size: 24px;

font-weight: 700;

text-align: center;

margin-bottom: 25px;

background: linear-gradient(135deg, #4CAF50, #00BCD4);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.section-subtitle {

font-size: 18px;

font-weight: 600;

margin-bottom: 15px;

color: #00BCD4;

}

.input-group {

margin-bottom: 20px;

}

.input-label {

display: block;

margin-bottom: 8px;

font-weight: 500;

color: rgba(255, 255, 255, 0.9);

}

.input-field {

width: 100%;

padding: 15px 20px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: white;

font-size: 15px;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

}

.input-field:focus {

outline: none;

border-color: #4CAF50;

background: rgba(255, 255, 255, 0.1);

box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);

}

.search-group {

position: relative;

margin-bottom: 20px;

}

.search-input {

width: 100%;

padding: 15px 50px 15px 20px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: white;

font-size: 15px;

transition: all 0.3s ease;

}

.search-btn {

position: absolute;

right: 10px;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

color: rgba(255, 255, 255, 0.7);

cursor: pointer;

padding: 5px;

}

.search-results {

max-height: 300px;

overflow-y: auto;

margin-bottom: 20px;

border-radius: 15px;

background: rgba(255, 255, 255, 0.05);

padding: 15px;

}

.film-item {

display: flex;

gap: 15px;

padding: 12px;

border-radius: 12px;

cursor: pointer;

transition: all 0.3s ease;

margin-bottom: 10px;

background: rgba(255, 255, 255, 0.05);

}

.film-item:hover {

background: rgba(255, 255, 255, 0.1);

transform: translateY(-2px);

}

.film-poster img {

width: 60px;

height: 90px;

border-radius: 8px;

object-fit: cover;

}

.film-info {

flex: 1;

}

.film-title {

font-weight: 600;

color: white;

margin-bottom: 5px;

}

.film-year, .film-rating {

font-size: 13px;

color: rgba(255, 255, 255, 0.7);

}

.selected-film {

background: rgba(76, 175, 80, 0.2);

border: 1px solid rgba(76, 175, 80, 0.4);

padding: 12px 20px;

border-radius: 15px;

margin-bottom: 20px;

text-align: center;

color: #4CAF50;

font-weight: 500;

}

.player-sources {

display: flex;

gap: 10px;

margin-bottom: 20px;

flex-wrap: wrap;

justify-content: center;

}

.source-btn {

padding: 10px 15px;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 20px;

color: rgba(255, 255, 255, 0.8);

cursor: pointer;

transition: all 0.3s ease;

font-size: 13px;

}

.source-btn:hover {

background: rgba(255, 255, 255, 0.12);

}

.source-btn.active {

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border-color: transparent;

color: white;

}

.action-btn {

width: 100%;

padding: 16px;

background: linear-gradient(135deg, #4CAF50, #00BCD4);

border: none;

border-radius: 20px;

color: white;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

margin-top: 10px;

}

.action-btn:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(76, 175, 80, 0.4);

}

/* Сетка фильмов */

.movies-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

gap: 15px;

margin-bottom: 25px;

}

.movie-card {

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

overflow: hidden;

cursor: pointer;

transition: all 0.3s ease;

}

.movie-card:hover {

transform: translateY(-5px);

background: rgba(255, 255, 255, 0.1);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}

.movie-card-poster img {

width: 100%;

height: 200px;

object-fit: cover;

}

.movie-card-info {

padding: 12px;

}

.movie-card-title {

font-weight: 600;

margin-bottom: 5px;

font-size: 13px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.movie-card-year, .movie-card-rating {

font-size: 11px;

color: rgba(255, 255, 255, 0.7);

}

/* Модальное окно плеера */

.player-modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

z-index: 2000;

align-items: center;

justify-content: center;

padding: 20px;

}

.player-container {

width: 100%;

max-width: 1200px;

height: 80vh;

background: #000;

border-radius: 15px;

overflow: hidden;

position: relative;

}

.player-iframe {

width: 100%;

height: 100%;

border: none;

}

.close-player {

position: absolute;

top: 15px;

right: 15px;

background: rgba(255, 0, 0, 0.8);

color: white;

border: none;

border-radius: 50%;

width: 40px;

height: 40px;

font-size: 20px;

cursor: pointer;

z-index: 2001;

}

/* Анимации */

@keyframes gradientMove {

0% { background-position: 0% 50%; }

100% { background-position: 400% 50%; }

}

/* Адаптивность */

@media (max-width: 768px) {

.modal-content {

max-height: 95vh;

padding: 10px;

}

.modal-header {

padding: 20px 15px 15px;

}

.modal-body {

padding: 0 15px 20px;

}

.nav-buttons {

flex-direction: column;

align-items: center;

}

.nav-btn {

width: 100%;

text-align: center;

}

.movies-grid {

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

}

.player-sources {

flex-direction: column;

}

</style>

</head>

<body>

🎬 Открыть KinoPoiskID

</button>

<h1 class="modal-title">KinoPoiskID</h1>

Платформа для просмотра фильмов и сериалов

</div>

<button class="nav-btn active" data-section="playerSection" onclick="showSection('playerSection')">🎬 Плеер фильмов</button>

<button class="nav-btn" data-section="movieSection" onclick="showSection('movieSection')">📚 Киносправочник</button>

</div>

<h2 class="section-title">🎬 Плеер фильмов</h2>

<label class="input-label">Поиск фильмов и сериалов:</label>

</div>

</div>

<label class="input-label">ID Кинопоиска:</label>

</div>

<button class="source-btn active" data-source="source1" onclick="selectPlayerSource('source1')">Основной плеер</button>

<button class="source-btn" data-source="source2" onclick="selectPlayerSource('source2')">Альтернативный 1</button>

<button class="source-btn" data-source="source3" onclick="selectPlayerSource('source3')">Альтернативный 2</button>

<button class="source-btn" data-source="source4" onclick="selectPlayerSource('source4')">Альтернативный 3</button>

</div>

<button class="action-btn" onclick="openPlayer()">🎬 Смотреть фильм/сериал</button>

<button class="action-btn" onclick="loadPopularMovies()">🔥 Загрузить популярные фильмы</button>

</div>

<h2 class="section-title">📚 Киносправочник</h2>

<label class="input-label">Поиск информации о фильме:</label>

</div>

🔍 Поиск информации о фильме...

</div>

</div>

</div>

// Глобальные переменные

let playerSources = [

{ id: 'source1', name: 'Основной плеер', url: 'https://api1690380040.atomics.ws/embed/kp/' },

{ id: 'source2', name: 'Альтернативный 1', url: 'https://www.kinopoisk.one/film/' },

{ id: 'source3', name: 'Основной плеер', url: 'https://5414e3c9.obrut.show/embed/kDN?kinopoisk_id=' },

{ id: 'source4', name: 'Альтернативный 2', url: 'https://api.embess.ws/embed/kp/' }

];

let currentPlayerSource = playerSources[0];

// Функции для модального окна

function openModal() {

document.getElementById('serviceModal').style.display = 'flex';

// Загружаем популярные фильмы при открытии

loadPopularMovies();

}

function closeModal() {

document.getElementById('serviceModal').style.display = 'none';

}

// Функции для навигации по секциям

function showSection(sectionId) {

// Скрыть все секции

document.querySelectorAll('.function-section').forEach(section => {

section.classList.remove('active');

});

// Показать выбранную секцию

document.getElementById(sectionId).classList.add('active');

// Обновить активную кнопку

document.querySelectorAll('.nav-btn').forEach(btn => {

btn.classList.remove('active');

});

document.querySelector(`.nav-btn[data-section="${sectionId}"]`).classList.add('active');

}

// Функция для открытия плеера

function openPlayer() {

let kpId = document.getElementById("kpIdInput").value;

if (!kpId) {

alert("Пожалуйста, введите ID Кинопоиска");

return;

}

let iframeSrc = currentPlayerSource.url + kpId;

document.getElementById("playerIframe").src = iframeSrc;

document.getElementById("playerModal").style.display = "flex";

}

// Функция для закрытия плеера

function closePlayer() {

document.getElementById("playerModal").style.display = "none";

document.getElementById("playerIframe").src = ""; // Очищаем iframe при закрытии

}

// Функция для выбора источника плеера

function selectPlayerSource(sourceId) {

const source = playerSources.find(s => s.id === sourceId);

if (source) {

currentPlayerSource = source;

// Обновляем активный класс у кнопок

document.querySelectorAll('.source-btn').forEach(btn => {

btn.classList.remove('active');

});

document.querySelector(`.source-btn[data-source="${sourceId}"]`).classList.add('active');

}

// Функция для поиска фильмов/сериалов по названию

async function searchContent() {

const searchInput = document.getElementById("searchInput").value.trim();

const resultsContainer = document.getElementById("searchResults");

if (!searchInput) {

alert("Пожалуйста, введите название фильма или сериала");

return;

}

// Показываем индикатор загрузки

resultsContainer.innerHTML = '<div class="loading">Поиск...</div>';

try {

const apiUrl = `https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=${encodeURIComponent(searchInput)}&page=1`;

const response = await fetch(apiUrl, {

headers: {

'X-API-KEY': '960dc4e3-9eae-4072-8f0c-98a5ed6c0d2a',

'Content-Type': 'application/json',

}

});

if (!response.ok) {

throw new Error('Ошибка при поиске. Статус: ' + response.status);

}

const data = await response.json();

displayResults(data.films);

} catch (error) {

console.error('Ошибка:', error);

resultsContainer.innerHTML = '<div class="error">Произошла ошибка при поиске. Попробуйте еще раз.</div>';

}

// Функция для отображения результатов поиска

function displayResults(films) {

const resultsContainer = document.getElementById("searchResults");

if (!films || films.length === 0) {

resultsContainer.innerHTML = '<div class="no-results">Ничего не найдено</div>';

return;

}

let html = '<div class="section-subtitle">Результаты поиска:</div>';

films.slice(0, 5).forEach(film => {

html += `

</div>

<div class="film-title">${film.nameRu || film.nameEn}</div>

<div class="film-year">${film.year || 'Год неизвестен'}</div>

<div class="film-rating">Рейтинг: ${film.rating || 'нет'}</div>

</div>

`;

});

resultsContainer.innerHTML = html;

}

// Функция для выбора фильма из результатов поиска

function selectFilm(filmId, filmTitle) {

document.getElementById("kpIdInput").value = filmId;

document.getElementById("selectedFilm").textContent = `Выбран: ${filmTitle} (ID: ${filmId})`;

document.getElementById("searchResults").innerHTML = '';

document.getElementById("searchInput").value = '';

}

// Функция для загрузки популярных фильмов

async function loadPopularMovies() {

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

const response = await fetch('https://api.kinopoisk.dev/v1.4/movie?page=1&limit=12&lists=popular-films', {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!response.ok) {

throw new Error('Ошибка загрузки популярных фильмов');

}

const data = await response.json();

displayPopularMovies(data.docs);

} catch (error) {

console.error('Ошибка:', error);

document.getElementById('popularMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить популярные фильмы</div>';

}

// Отображение популярных фильмов

function displayPopularMovies(movies) {

const container = document.getElementById('popularMoviesContainer');

if (!movies || movies.length === 0) {

container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';

return;

}

let html = '<div class="movies-grid">';

movies.forEach(movie => {

html += `

</div>

<div class="movie-card-title">${movie.name || movie.alternativeName}</div>

<div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>

<div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>

</div>

`;

});

html += '</div>';

container.innerHTML = html;

}

// Функция для поиска информации о фильме

async function searchMovieInfo() {

const query = document.getElementById('movieSearchInput').value.trim();

if (query.length < 1) return;

const loader = document.getElementById('movieLoader');

const content = document.getElementById('movieContent');

// Показать loader

loader.style.display = 'block';

content.style.display = 'none';

try {

const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';

// Выполняем поиск через API Кинопоиска

const searchResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/search?page=1&limit=1&query=${encodeURIComponent(query)}`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!searchResponse.ok) {

throw new Error('Ошибка при поиске фильма');

}

const searchData = await searchResponse.json();

if (searchData.docs && searchData.docs.length > 0) {

const movieId = searchData.docs[0].id;

// Получаем детальную информацию о фильме

const movieResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/${movieId}`, {

headers: {

'X-API-Key': KINOPOISK_API_TOKEN

}

});

if (!movieResponse.ok) {

throw new Error('Ошибка при получении информации о фильме');

}

const movieData = await movieResponse.json();

// Формируем HTML с информацией о фильме

let html = `

</div>

<div class="film-title" style="font-size: 20px; margin-bottom: 10px;">${movieData.name || movieData.alternativeName || 'Название неизвестно'}</div>

`;

// Добавляем мета-информацию

if (movieData.year) html += `<span style="background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 10px;">${movieData.year}</span>`;

if (movieData.ageRating) html += `<span style="background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 10px;">${movieData.ageRating}+</span>`;

if (movieData.genres && movieData.genres.length > 0) {

movieData.genres.slice(0, 3).forEach(genre => {

html += `<span style="background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 10px;">${genre.name}</span>`;

});

}

if (movieData.movieLength) {

const hours = Math.floor(movieData.movieLength / 60);

const minutes = movieData.movieLength % 60;

html += `<span style="background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 10px;">${hours}ч ${minutes}м</span>`;

}

html += `</div>`;

// Рейтинг

html += `<div style="margin-bottom: 15px; font-size: 18px; color: #4CAF50;">⭐ Рейтинг: ${movieData.rating?.kp ? movieData.rating.kp.toFixed(1) : 'Н/Д'}</div>`;

// Описание

html += `<div style="margin-bottom: 20px; line-height: 1.5;">${movieData.description || 'Описание отсутствует'}</div>`;

// Кнопки действий

html += `

🎬 Смотреть

</button>

📖 Кинопоиск

</button>

</div>

`;

html += `</div></div>`;

content.innerHTML = html;

loader.style.display = 'none';

content.style.display = 'block';

} else {

throw new Error('Фильм не найден');

}

} catch (error) {

console.error('Ошибка:', error);

loader.style.display = 'none';

content.innerHTML = '<div class="error">Произошла ошибка при поиске. Попробуйте другой запрос.</div>';

content.style.display = 'block';

}

// Обработчики событий

document.addEventListener('DOMContentLoaded', function() {

// Обработчик для поиска фильмов при нажатии Enter

document.getElementById('searchInput')?.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

searchContent();

}

});

document.getElementById('movieSearchInput')?.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

searchMovieInfo();

}

});

// Обработчик для закрытия модальных окон при клике вне их

window.onclick = function(event) {

const serviceModal = document.getElementById('serviceModal');

const playerModal = document.getElementById('playerModal');

if (event.target === serviceModal) {

closeModal();

}

if (event.target === playerModal) {

closePlayer();

}

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

<span>Oink Studio (beta)</span>

</a>

<a class="header_nav_link" href="" rel="external nofollow" target="_blank">Upload</a>

</nav>

</section>

</div>

</nav>

</div>

</section>

</header>

<head>

<title>Upload video</title>

</head>

<body>

</form>

</body>

Отправляя Видео на модерацию вы соглашаетесь на передачу персональных данных, в случае нарушения правил платформы ваш контент будет переданы Гос.Инстанциями

</div>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-padding-top: 109px;

scroll-behavior: smooth;

}

body {

background: #eaeaef;

font-family: system-ui;

font-size: 18px;

line-height: 1.5;

color: #383a50;

}

a {

color: #0055ff;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

h1 {

margin: 32px 0 16px;

font-size: 36px;

font-weight: 700;

}

h2 {

margin: 32px 0 16px;

font-size: 30px;

font-weight: 700;

}

h3 {

margin: 32px 0 16px;

font-size: 24px;

font-weight: 700;

}

pre {

margin: 16px 0 !important;

border-radius: 4px;

font-family: 'Consolas', monospace;

font-size: 16px !important;

}

code:not([class]) {

font-family: 'Consolas', monospace;

font-size: 14px;

white-space: nowrap;

background-color: #e6e7fc;

border-radius: 4px;

padding: 3px 6px;

}

ol, ul {

list-style-position: inside;

}

hr {

margin: 16px 0;

border: none;

border-bottom: solid 1px #fafaff;

border-top: solid 1px #383a5022;

}

summary {

padding: 4px 8px;

background: #d2d2d9;

border-radius: 4px;

}

details > p {

padding: 8px;

background: #ffffff;

border-radius: 4px;

}

/*

* Common

*/

.primary_title {

padding-left: 8px;

border-left: solid 4px #666cff;

}

.note-info {

font-size: 16px;

background: #e6e7fc;

border-left: solid 4px #666cff;

border-radius: 0 4px 4px 0;

padding: 8px 16px;

margin-bottom: 24px;

}

/*

* Icons

*/

i[class^="ico_"] {

display: inline-block;

width: 24px;

height: 24px;

background-color: #b9c0cb;

}

.ico_logo {

-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'%3E%3C/path%3E%3C/svg%3E");

}

.ico_telegram {

-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'%3E%3C/path%3E%3C/svg%3E");

}

#button_top {

position: fixed;

bottom: 64px;

right: -44px;

visibility: hidden;

width: 44px;

height: 44px;

display: flex;

justify-content: center;

align-items: center;

border-radius: 4px 0 0 4px;

background-color: rgb(50, 50, 60, 0.5);

fill: #ffffff;

cursor: pointer;

transition: all 0.1s linear;

}

#button_top[active] {

right: 0;

visibility: visible;

}

/*

* Table

*/

table {

width: 100%;

margin-bottom: 16px;

background: #ffffff;

border: solid 1px #d7d8dd;

border-spacing: 0;

border-collapse: collapse;

box-shadow: 0 1px 2px #00000011;

font-size: 16px;

}

th, td {

padding: 8px 12px;

border: solid 1px #d2d2d9;

}

th {

background: #f4f4f9;

font-size: 15px;

font-weight: 600;

}

td {

vertical-align: top;

}

/*

* Wrapper

*/

.container {

max-width: 1080px;

width: 100%;

margin: 0 auto;

padding: 0 16px;

scroll-margin-bottom: 380px;

scroll-margin-top: 380px;

}

/*

* Header

*/

.header {

position: sticky;

scroll-margin-bottom: 380px;

top: 0;

z-index: 1100;

width: 100%;

margin-bottom: 64px;

background: rgb(50, 50, 60);

border-bottom: solid 1px rgb(50, 50, 60);

box-shadow: 0 4px 8px rgb(50, 50, 60, 0.5);

}

.header_body {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 16px;

padding: 16px 0;

}

/*

* Header logo

*/

.header_logo {

display: flex;

align-items: center;

gap: 8px;

font-size: 26px;

font-weight: 600;

color: #ffffff;

}

.header_logo:hover {

text-decoration: none;

}

.header_logo i {

width: 24px;

height: 32px;

background: #666cff;

}

/*

* Header navigation

*/

.header_nav {

display: flex;

align-items: center;

justify-content: space-evenly;

flex-wrap: wrap;

gap: 16px;

}

.header_nav_link {

padding: 8px;

border-radius: 8px;

font-size: 18px;

font-weight: 600;

color: #fff;

}

.header_nav_link:hover {

color: #ffc600;

text-decoration: none;

}

/*

* Header promo

*/

.header_promo {

padding: 6px;

background: rgb(70, 70, 90);

font-size: 14px;

}

.header_promo i {

background: #ffffff;

width: 20px;

height: 20px;

-webkit-mask-size: 20px;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

vertical-align: top;

margin-right: 4px;

}

.header_promo a {

color: #ffffff;

}

.header_promo_nav {

display: flex;

justify-content: space-evenly;

}

/*

* Footer

*/

.footer {

margin-top: 64px;

padding: 16px;

text-align: center;

}

/*

* Section

*/

.section {

margin-bottom: 32px;

padding-bottom: 32px;

border-bottom: solid 1px #383a5022;

}

.section:last-child {

padding-bottom: 0;

border: none;

}

.section_header {

margin-bottom: 32px;

}

.section_body {

}

/*

* Home page

*/

.home_nav {

margin-top: 32px;

display: flex;

justify-content: space-evenly;

flex-wrap: wrap;

gap: 16px 0;

}

.home_nav_item {

width: 400px;

padding: 12px 24px;

display: flex;

flex-direction: column;

align-items: start;

gap: 4px;

background: rgb(100, 100, 120);

border-radius: 16px;

font-size: 16px;

color: #ffffff;

}

.home_nav_item a {

font-size: 24px;

font-weight: 600;

color: #ffffff;

}

.home_example_code {

font-size: 16px;

}

/*

* Docs nav

*/

.docs_nav {

padding: 8px 16px;

background: #e2e4fa;

border-radius: 8px;

}

code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.token.class-name {color: #f08d49;}

</style>

Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;

Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};

Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:$(?:[^()]|\([^()]*$)*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*$\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*$)+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/($\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*$)+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)$\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*$)+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;

(function(d,s){new Image().src="https://counter.yadro.ru/hit;kinoflextv?t38.6;r"+escape(d.referrer)+((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+";h"+escape(d.title.substring(0,150))+";"+Math.random()})(document,screen);

'use strict';

/* Scroll to top */

(() => {

const button = document.querySelector('#button_top');

if (!button) {

return;

}

setTimeout(() => {

if (window.scrollY !== 0) {

button.setAttribute('active', 'true');

}

});

button.addEventListener('click', e => {

e.preventDefault();

window.scrollTo(0, 0);

});

window.addEventListener('scroll', () => {

const hidden = window.scrollY === 0;

if (hidden) {

button.removeAttribute('active');

} else {

button.setAttribute('active', 'true');

}

});

})();

/* Toggle blocks */

(() => {

const togglers = document.querySelectorAll('[data-toggle]');

if (togglers.length === 0) return;

togglers.forEach(toggler => {

const target = document.querySelector(`[data-toggle-id="${toggler.dataset.toggle}"]`);

if (target) {

toggler.addEventListener('click', e => {

const isActive = toggler.classList.contains('active');

togglers.forEach(otherToggler => {

otherToggler.classList.remove('active');

const otherTarget = document.querySelector(`[data-toggle-id="${otherToggler.dataset.toggle}"]`);

if (!otherTarget) return;

otherTarget.classList.remove('active');

});

// if (isActive) {

//     toggler.classList.remove('active');

//     target.classList.remove('active');

// } else {

//     toggler.classList.add('active');

//     target.classList.add('active');

// }

toggler.classList.add('active');

target.classList.add('active');

});

}

});

togglers[0].click();

})();

/* Checkbox proxy */

function proxyCheckbox(checkbox, element) {

if (checkbox.checked) {

element.classList.add('checked');

} else {

element.classList.remove('checked');

}

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {

if (!checkbox.dataset.proxy) return;

const target = document.querySelector(`[data-proxy-id="${checkbox.dataset.proxy}"]`);

if (!target) return;

proxyCheckbox(checkbox, target);

checkbox.addEventListener('change', _ => {

proxyCheckbox(checkbox, target);

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;

background: #000;

color: white;

overflow: hidden;

height: 100vh;

user-select: none;

}

.app-container {

position: relative;

width: 100%;

height: 100vh;

max-width: 480px;

margin: 0 auto;

background: #000;

overflow: hidden;

}

/* Header */

.header {

position: absolute;

top: 0;

left: 0;

right: 0;

z-index: 100;

display: flex;

justify-content: center;

align-items: center;

padding: 60px 20px 20px;

background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);

}

.tab-navigation {

display: flex;

gap: 30px;

}

.tab-btn {

background: none;

border: none;

color: rgba(255,255,255,0.6);

font-size: 16px;

font-weight: 600;

padding: 10px 0;

cursor: pointer;

transition: all 0.3s ease;

position: relative;

}

.tab-btn.active {

color: white;

}

.tab-btn.active::after {

content: '';

position: absolute;

bottom: -5px;

left: 50%;

transform: translateX(-50%);

width: 20px;

height: 2px;

background: white;

border-radius: 1px;

}

/* Video Container */

.video-container {

position: relative;

height: 100vh;

overflow: hidden;

}

.video-list {

position: relative;

height: 100%;

transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.video-item {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

background: #111;

}

.video-item video {

width: 100%;

height: 100%;

object-fit: cover;

}

.video-placeholder {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: rgba(255,255,255,0.6);

text-align: center;

padding: 40px;

}

.upload-icon {

font-size: 60px;

margin-bottom: 20px;

opacity: 0.5;

}

/* Side Controls */

.side-controls {

position: absolute;

right: 15px;

bottom: 100px;

z-index: 50;

display: flex;

flex-direction: column;

gap: 20px;

}

.control-btn {

width: 50px;

height: 50px;

border-radius: 25px;

border: none;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

color: white;

font-size: 20px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.3s ease;

}

.control-btn:hover {

background: rgba(255,255,255,0.3);

transform: scale(1.1);

}

.control-btn.liked {

background: rgba(254, 44, 85, 0.8);

}

/* Bottom Info */

.video-info {

position: absolute;

bottom: 0;

left: 0;

right: 60px;

z-index: 50;

padding: 20px;

background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);

}

.video-title {

font-size: 16px;

font-weight: 600;

margin-bottom: 8px;

}

.video-description {

font-size: 14px;

color: rgba(255,255,255,0.8);

margin-bottom: 10px;

}

.video-tags {

display: flex;

gap: 8px;

flex-wrap: wrap;

}

.tag {

background: rgba(255,255,255,0.2);

padding: 4px 8px;

border-radius: 12px;

font-size: 12px;

}

/* Upload Panel */

.upload-panel {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,0.9);

backdrop-filter: blur(10px);

z-index: 200;

display: none;

align-items: center;

justify-content: center;

padding: 40px;

}

.upload-content {

background: rgba(255,255,255,0.1);

border-radius: 20px;

padding: 40px;

text-align: center;

max-width: 400px;

width: 100%;

position: relative;

}

.upload-area {

border: 2px dashed rgba(255,255,255,0.3);

border-radius: 15px;

padding: 40px 20px;

margin: 20px 0;

cursor: pointer;

transition: all 0.3s ease;

}

.upload-area:hover {

border-color: rgba(255,255,255,0.6);

background: rgba(255,255,255,0.05);

}

.upload-btn {

background: linear-gradient(45deg, #ff0050, #ff4081);

border: none;

color: white;

padding: 12px 30px;

border-radius: 25px;

font-weight: 600;

cursor: pointer;

margin: 10px;

transition: all 0.3s ease;

}

.upload-btn:hover {

transform: translateY(-2px);

box-shadow: 0 10px 20px rgba(255, 0, 80, 0.3);

}

.close-btn {

position: absolute;

top: 20px;

right: 20px;

background: none;

border: none;

color: white;

font-size: 24px;

cursor: pointer;

}

/* Swipe Indicator */

.swipe-indicator {

position: absolute;

right: 5px;

top: 50%;

transform: translateY(-50%);

z-index: 40;

display: flex;

flex-direction: column;

gap: 8px;

}

.swipe-dot {

width: 3px;

height: 20px;

background: rgba(255,255,255,0.3);

border-radius: 2px;

transition: all 0.3s ease;

}

.swipe-dot.active {

background: white;

}

/* Loading */

.loading {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 70;

}

.spinner {

width: 40px;

height: 40px;

border: 3px solid rgba(255,255,255,0.3);

border-top: 3px solid white;

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Live Streaming Styles */

.live-indicator {

position: absolute;

top: 20px;

left: 20px;

background: #ff4444;

color: white;

padding: 4px 8px;

border-radius: 4px;

font-size: 12px;

font-weight: 600;

z-index: 60;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { opacity: 1; }

50% { opacity: 0.7; }

100% { opacity: 1; }

}

.stream-info {

position: absolute;

top: 60px;

left: 20px;

right: 20px;

z-index: 60;

background: rgba(0,0,0,0.6);

padding: 10px;

border-radius: 8px;

backdrop-filter: blur(10px);

}

.stream-title {

font-size: 14px;

font-weight: 600;

margin-bottom: 4px;

}

.stream-viewers {

font-size: 12px;

opacity: 0.8;

}

.live-controls {

position: absolute;

bottom: 120px;

right: 15px;

z-index: 60;

display: flex;

flex-direction: column;

gap: 10px;

}

.live-control-btn {

width: 45px;

height: 45px;

border-radius: 25px;

border: none;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

color: white;

font-size: 16px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.3s ease;

}

.live-control-btn:hover {

background: rgba(255,255,255,0.3);

transform: scale(1.1);

}

.live-control-btn.recording {

background: rgba(255, 0, 0, 0.8);

}

.stream-input {

width: 100%;

padding: 12px;

margin: 10px 0;

border: 1px solid rgba(255,255,255,0.3);

background: rgba(255,255,255,0.1);

color: white;

border-radius: 8px;

font-size: 14px;

}

.stream-input::placeholder {

color: rgba(255,255,255,0.5);

}

.sample-buttons {

display: flex;

gap: 8px;

margin: 10px 0;

flex-wrap: wrap;

}

.sample-btn {

padding: 6px 10px;

background: rgba(255,255,255,0.2);

border: none;

color: white;

border-radius: 4px;

font-size: 11px;

cursor: pointer;

transition: all 0.2s ease;

}

.sample-btn:hover {

background: rgba(255,255,255,0.3);

}

.section-buttons {

display: flex;

gap: 10px;

margin: 20px 0;

}

.section-btn {

flex: 1;

padding: 12px;

background: rgba(255,255,255,0.1);

border: 1px solid rgba(255,255,255,0.3);

color: white;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.section-btn.active {

background: linear-gradient(45deg, #ff0050, #ff4081);

border-color: transparent;

}

.stream-section {

display: none;

}

.stream-section.active {

display: block;

}

/* Play button overlay */

.play-overlay {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 80px;

height: 80px;

background: rgba(255,255,255,0.9);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 30px;

cursor: pointer;

z-index: 10;

transition: all 0.3s ease;

}

.play-overlay:hover {

background: rgba(255,255,255,1);

transform: translate(-50%, -50%) scale(1.1);

}

/* Mobile Responsive */

@media (max-width: 768px) {

.header {

padding: 40px 15px 15px;

}

.side-controls {

right: 10px;

bottom: 80px;

}

.control-btn {

width: 45px;

height: 45px;

font-size: 18px;

}

.live-controls {

right: 10px;

bottom: 100px;

}

.upload-content {

padding: 30px 20px;

margin: 0 20px;

}

</style>

</head>

<body>

<button class="tab-btn" data-tab="following">Подписки</button>

</div>

</div>

</div>

</div>

<div class="video-title">Добро пожаловать в VideoApp!</div>

<div class="video-description">Загрузите свои первые видео, чтобы начать просмотр</div>

<span class="tag">#видео</span>

<span class="tag">#развлечения</span>

</div>

<h2>Загрузить видео</h2>

Нажмите чтобы выбрать видео

MP4, MOV, AVI, WebM до 100MB

</div>

<button class="upload-btn" onclick="document.getElementById('fileInput').click()">Выбрать файлы</button>

</div>

<h2>ߔ LIVE Трансляция</h2>

ߓ Запустить

</button>

ߓ Смотреть

</button>

</div>

<h3>Запуск трансляции</h3>

Запустить трансляцию с камеры

Требуется разрешение камеры

</div>

<button class="upload-btn" onclick="startWebcamStream()">ߔ Начать трансляцию</button>

</div>

<h3>Просмотр трансляции</h3>

<button class="sample-btn" onclick="addSampleStream('https://tv.mediacdn.ru/live/solntse/playlist.m3u8')">Солнце</button>

<button class="sample-btn"onclick="addSampleStream('https://player.smotrim.ru/iframe/stream/live_id/985d5c7b-9727-4942-a4ba-a6e852caf0c1?.m3u8')">Соловьев Live</button>

</div>

<button class="upload-btn" onclick="addStreamUrl()">ߓ Добавить трансляцию</button>

</div>

// Global variables

let videos = [];

let currentVideoIndex = 0;

let currentTab = 'foryou';

let isScrolling = false;

let webcamStream = null;

let isStreaming = false;

// Data storage for different tabs

const tabData = {

foryou: [],

following: [],

live: []

};

// Initialize app

document.addEventListener('DOMContentLoaded', function() {

console.log('Инициализация VideoApp...');

initializeApp();

setupEventListeners();

});

function initializeApp() {

// Create initial placeholder if no videos

if (videos.length === 0) {

createPlaceholderVideo();

}

updateVideoDisplay();

updateSwipeIndicators();

console.log('Приложение инициализировано');

}

function setupEventListeners() {

// Tab switching

document.querySelectorAll('.tab-btn').forEach(btn => {

btn.addEventListener('click', (e) => {

switchTab(e.target.dataset.tab);

});

// Touch events for swiping

const videoContainer = document.querySelector('.video-container');

let startY = 0;

let isDragging = false;

videoContainer.addEventListener('touchstart', (e) => {

startY = e.touches[0].clientY;

isDragging = true;

});

videoContainer.addEventListener('touchmove', (e) => {

if (!isDragging) return;

e.preventDefault();

});

videoContainer.addEventListener('touchend', (e) => {

if (!isDragging) return;

isDragging = false;

const endY = e.changedTouches[0].clientY;

const deltaY = startY - endY;

if (Math.abs(deltaY) > 50) { // Minimum swipe distance

if (deltaY > 0) {

nextVideo(); // Swipe up

} else {

previousVideo(); // Swipe down

}

});

// Mouse events for desktop

videoContainer.addEventListener('wheel', (e) => {

e.preventDefault();

if (e.deltaY > 0) {

nextVideo();

} else {

previousVideo();

}

});

// Keyboard navigation

document.addEventListener('keydown', (e) => {

switch(e.key) {

case 'ArrowUp':

e.preventDefault();

previousVideo();

break;

case 'ArrowDown':

e.preventDefault();

nextVideo();

break;

case ' ':

e.preventDefault();

togglePlayPause();

break;

}

});

console.log('События настроены');

}

function createPlaceholderVideo() {

const placeholder = {

id: 'placeholder-' + Date.now(),

type: 'placeholder',

title: 'Добро пожаловать в HubApp!',

description: 'Загрузите видео чтобы начать просмотр',

tags: ['#добро пожаловать', '#загрузите видео']

};

videos.push(placeholder);

tabData[currentTab].push(placeholder);

}

function createLivePlaceholder() {

const placeholder = {

id: 'live-placeholder-' + Date.now(),

type: 'live-placeholder',

title: 'ߔ LIVE Трансляции',

description: 'Запустите свою трансляцию или смотрите прямые эфиры',

tags: ['#live', '#трансляции']

};

videos.push(placeholder);

tabData[currentTab].push(placeholder);

}

function switchTab(tabName) {

console.log(`Переключение на вкладку: ${tabName}`);

currentTab = tabName;

// Update tab UI

document.querySelectorAll('.tab-btn').forEach(btn => {

btn.classList.remove('active');

});

document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');

// Switch video content based on tab

videos = [...(tabData[tabName] || [])];

console.log(`Видео в текущей вкладке: ${videos.length}`);

if (videos.length === 0) {

if (tabName === 'live') {

createLivePlaceholder();

} else {

createPlaceholderVideo();

}

currentVideoIndex = 0;

updateVideoDisplay();

updateSwipeIndicators();

}

function updateVideoDisplay() {

const videoList = document.getElementById('videoList');

videoList.innerHTML = '';

console.log(`Обновляем отображение. Видео: ${videos.length}, текущее: ${currentVideoIndex}`);

videos.forEach((video, index) => {

const videoItem = document.createElement('div');

videoItem.className = 'video-item';

videoItem.style.transform = `translateY(${(index - currentVideoIndex) * 100}%)`;

if (video.type === 'placeholder') {

videoItem.innerHTML = `

<h2>${video.title}</h2>

${video.description}

Загрузить видео

</button>

</div>

`;

} else if (video.type === 'live-placeholder') {

videoItem.innerHTML = `

<h2>${video.title}</h2>

${video.description}

ߔ LIVE трансляция

</button>

</div>

`;

} else if (video.type === 'live-stream') {

console.log(`Создаем LIVE поток: ${video.title}`);

const videoElement = document.createElement('video');

videoElement.muted = false;

videoElement.playsInline = true;

videoElement.controls = false;

videoElement.autoplay = true;

videoElement.volume = 1.0;

// HLS/DASH support

if (video.url.includes('.m3u8') && typeof Hls !== 'undefined' && Hls.isSupported()) {

const hls = new Hls({

debug: false,

enableWorker: true,

lowLatencyMode: true

});

hls.loadSource(video.url);

hls.attachMedia(videoElement);

hls.on(Hls.Events.MANIFEST_PARSED, () => {

console.log('HLS манифест загружен');

if (index === currentVideoIndex) {

videoElement.play().catch(console.error);

}

});

hls.on(Hls.Events.ERROR, (event, data) => {

console.error('HLS ошибка:', data);

if (data.fatal) {

videoItem.innerHTML = `

<h3>Ошибка трансляции</h3>

Не удалось загрузить поток

</div>

`;

}

});

} else {

videoElement.src = video.url;

}

// Live indicators

const liveIndicator = document.createElement('div');

liveIndicator.className = 'live-indicator';

liveIndicator.textContent = 'ߔ LIVE';

const streamInfo = document.createElement('div');

streamInfo.className = 'stream-info';

streamInfo.innerHTML = `

<div class="stream-title">${video.title}</div>

<div class="stream-viewers">ߑ ${Math.floor(Math.random() * 1000) + 100} зрителей</div>

`;

videoItem.appendChild(videoElement);

videoItem.appendChild(liveIndicator);

videoItem.appendChild(streamInfo);

} else if (video.type === 'webcam-stream') {

console.log(`Создаем веб-камеру поток: ${video.title}`);

const videoElement = document.createElement('video');

videoElement.srcObject = video.stream;

videoElement.muted = false;

videoElement.playsInline = true;

videoElement.controls = false;

videoElement.autoplay = true;

// Live indicators

const liveIndicator = document.createElement('div');

liveIndicator.className = 'live-indicator';

liveIndicator.textContent = 'ߔ LIVE';

const streamInfo = document.createElement('div');

streamInfo.className = 'stream-info';

streamInfo.innerHTML = `

<div class="stream-title">${video.title}</div>

<div class="stream-viewers">ߑ Трансляция активна</div>

`;

const liveControls = document.createElement('div');

liveControls.className = 'live-controls';

liveControls.innerHTML = `

`;

videoItem.appendChild(videoElement);

videoItem.appendChild(liveIndicator);

videoItem.appendChild(streamInfo);

videoItem.appendChild(liveControls);

} else {

// Regular video

console.log(`Создаем видео элемент для: ${video.title}`);

const videoElement = document.createElement('video');

videoElement.src = video.url;

videoElement.loop = true;

videoElement.muted = false;

videoElement.playsInline = true;

videoElement.controls = false;

videoElement.preload = 'metadata';

videoElement.volume = 1.0;

// Event handlers

videoElement.onloadstart = () => {

console.log(`Начинается загрузка видео: ${video.title}`);

};

videoElement.oncanplay = () => {

console.log(`Видео готово к воспроизведению: ${video.title}`);

if (index === currentVideoIndex) {

videoElement.muted = false;

videoElement.play().catch(e => {

console.log('Автовоспроизведение со звуком заблокировано, пробуем без звука');

videoElement.muted = true;

videoElement.play().catch(e2 => {

console.error('Ошибка автовоспроизведения:', e2);

showPlayButton(videoItem, videoElement);

});

}

};

videoElement.onerror = (e) => {

console.error(`Ошибка видео ${video.title}:`, e);

videoItem.innerHTML = `

<h3>Ошибка загрузки</h3>

${video.title}

Попробуйте другой файл

</div>

`;

};

// Click to play/pause

videoElement.addEventListener('click', () => {

if (videoElement.paused) {

videoElement.play();

} else {

videoElement.pause();

}

});

videoItem.appendChild(videoElement);

}

videoList.appendChild(videoItem);

});

updateVideoInfo();

}

function updateVideoInfo() {

const videoInfo = document.getElementById('videoInfo');

const currentVideo = videos[currentVideoIndex];

if (currentVideo) {

videoInfo.innerHTML = `

<div class="video-title">${currentVideo.title}</div>

<div class="video-description">${currentVideo.description}</div>

${currentVideo.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}

</div>

`;

}

function updateSwipeIndicators() {

const indicator = document.getElementById('swipeIndicator');

indicator.innerHTML = '';

for (let i = 0; i < Math.min(videos.length, 5); i++) {

const dot = document.createElement('div');

dot.className = `swipe-dot ${i === currentVideoIndex ? 'active' : ''}`;

indicator.appendChild(dot);

}

function nextVideo() {

if (isScrolling || videos.length <= 1) return;

isScrolling = true;

pauseCurrentVideo();

currentVideoIndex = (currentVideoIndex + 1) % videos.length;

updateVideoPositions();

updateSwipeIndicators();

updateVideoInfo();

setTimeout(() => {

playCurrentVideo();

isScrolling = false;

}, 400);

}

function previousVideo() {

if (isScrolling || videos.length <= 1) return;

isScrolling = true;

pauseCurrentVideo();

currentVideoIndex = currentVideoIndex === 0 ? videos.length - 1 : currentVideoIndex - 1;

updateVideoPositions();

updateSwipeIndicators();

updateVideoInfo();

setTimeout(() => {

playCurrentVideo();

isScrolling = false;

}, 400);

}

function updateVideoPositions() {

const videoItems = document.querySelectorAll('.video-item');

videoItems.forEach((item, index) => {

item.style.transform = `translateY(${(index - currentVideoIndex) * 100}%)`;

});

}

function playCurrentVideo() {

const currentItem = document.querySelectorAll('.video-item')[currentVideoIndex];

if (currentItem) {

const video = currentItem.querySelector('video');

if (video) {

console.log(`Попытка воспроизведения видео ${currentVideoIndex}`);

video.currentTime = 0;

video.muted = false;

video.play().catch(e => {

console.log('Воспроизведение со звуком заблокировано, пробуем без звука');

video.muted = true;

video.play().catch(e2 => {

console.error('Ошибка воспроизведения:', e2);

showPlayButton(currentItem, video);

});

}

function pauseCurrentVideo() {

const videoItems = document.querySelectorAll('.video-item');

videoItems.forEach((item, index) => {

const video = item.querySelector('video');

if (video && !video.paused) {

video.pause();

}

});

}

function togglePlayPause() {

const currentItem = document.querySelectorAll('.video-item')[currentVideoIndex];

if (currentItem) {

const video = currentItem.querySelector('video');

if (video) {

if (video.paused) {

video.play();

} else {

video.pause();

}

// Control functions

function toggleLike() {

const likeBtn = document.getElementById('likeBtn');

likeBtn.classList.toggle('liked');

console.log('Лайк переключен');

}

function toggleMute() {

const currentItem = document.querySelectorAll('.video-item')[currentVideoIndex];

const muteBtn = document.getElementById('muteBtn');

if (currentItem) {

const video = currentItem.querySelector('video');

if (video) {

video.muted = !video.muted;

muteBtn.innerHTML = video.muted ? 'ߔ' : 'ߔ';

console.log(`Звук ${video.muted ? 'выключен' : 'включен'}`);

}

function shareVideo() {

if (navigator.share) {

navigator.share({

title: 'Посмотри это видео!',

text: 'Крутое видео из VideoApp',

url: window.location.href

});

} else {

// Fallback

navigator.clipboard.writeText(window.location.href).then(() => {

alert('Ссылка скопирована в буфер обмена!');

}).catch(() => {

alert('Функция "Поделиться" будет доступна в будущих версиях!');

});

}

// Upload Panel functions

function showUploadPanel() {

document.getElementById('uploadPanel').style.display = 'flex';

}

function hideUploadPanel() {

document.getElementById('uploadPanel').style.display = 'none';

}

// Live Panel functions

function showLivePanel() {

document.getElementById('livePanel').style.display = 'flex';

}

function hideLivePanel() {

document.getElementById('livePanel').style.display = 'none';

}

function showSection(sectionName) {

// Update buttons

document.querySelectorAll('.section-btn').forEach(btn => {

btn.classList.remove('active');

});

event.target.classList.add('active');

// Show/hide sections

document.querySelectorAll('.stream-section').forEach(section => {

section.classList.remove('active');

});

document.getElementById(sectionName + 'Section').classList.add('active');

}

// Webcam streaming functions

async function startWebcamStream() {

try {

console.log('Запрос доступа к камере...');

const stream = await navigator.mediaDevices.getUserMedia({

video: {

width: { ideal: 1280 },

height: { ideal: 720 },

facingMode: 'user'

},

audio: true

});

const title = document.getElementById('streamTitleInput').value || 'Моя трансляция';

const webcamVideo = {

id: 'webcam-' + Date.now(),

type: 'webcam-stream',

title: title,

description: `Прямая трансляция: ${new Date().toLocaleTimeString()}`,

tags: ['#live', '#трансляция', '#webcam'],

stream: stream

};

// Remove placeholder if exists

if (videos.length === 1 && (videos[0].type === 'live-placeholder' || videos[0].type === 'placeholder')) {

videos = [];

tabData[currentTab] = [];

}

tabData[currentTab].push(webcamVideo);

videos.push(webcamVideo);

webcamStream = stream;

isStreaming = true;

currentVideoIndex = videos.length - 1;

updateVideoDisplay();

updateSwipeIndicators();

hideLivePanel();

console.log('Webcam трансляция запущена:', title);

} catch (error) {

console.error('Ошибка доступа к камере:', error);

alert('Не удалось получить доступ к камере. Проверьте разрешения браузера.');

}

function stopWebcamStream() {

if (webcamStream) {

console.log('Остановка webcam трансляции...');

webcamStream.getTracks().forEach(track => track.stop());

webcamStream = null;

isStreaming = false;

// Remove webcam stream from videos

const webcamIndex = videos.findIndex(v => v.type === 'webcam-stream');

if (webcamIndex !== -1) {

videos.splice(webcamIndex, 1);

tabData[currentTab] = tabData[currentTab].filter(v => v.type !== 'webcam-stream');

}

if (videos.length === 0) {

createLivePlaceholder();

}

currentVideoIndex = Math.min(currentVideoIndex, videos.length - 1);

updateVideoDisplay();

updateSwipeIndicators();

console.log('Трансляция остановлена');

}

// Stream URL functions

function addSampleStream(url) {

document.getElementById('streamUrlInput').value = url;

}

function addStreamUrl() {

const url = document.getElementById('streamUrlInput').value.trim();

if (!url) {

alert('Введите ссылку на трансляцию');

return;

}

console.log('Добавляем внешнюю трансляцию:', url);

const streamVideo = {

id: 'stream-' + Date.now(),

type: 'live-stream',

title: 'Внешняя трансляция',

description: `${getStreamType(url)} поток: ${new Date().toLocaleTimeString()}`,

tags: ['#live', '#stream', getStreamType(url).toLowerCase()],

url: url

};

// Remove placeholder if exists

if (videos.length === 1 && (videos[0].type === 'live-placeholder' || videos[0].type === 'placeholder')) {

videos = [];

tabData[currentTab] = [];

}

tabData[currentTab].push(streamVideo);

videos.push(streamVideo);

currentVideoIndex = videos.length - 1;

updateVideoDisplay();

updateSwipeIndicators();

hideLivePanel();

// Clear input

document.getElementById('streamUrlInput').value = '';

console.log('Добавлена внешняя трансляция');

}

function getStreamType(url) {

if (url.includes('.m3u8')) return 'HLS';

if (url.includes('.mpd')) return 'DASH';

return 'Stream';

}

// File upload functions

function handleFileSelect(event) {

const files = Array.from(event.target.files);

console.log(`Выбрано файлов: ${files.length}`);

if (files.length === 0) {

return;

}

showLoading();

const videoFiles = files.filter(file => file.type.startsWith('video/'));

console.log(`Видеофайлов найдено: ${videoFiles.length}`);

if (videoFiles.length === 0) {

hideLoading();

alert('Пожалуйста, выберите видеофайлы');

return;

}

// Remove placeholder if it exists

if (videos.length === 1 && (videos[0].type === 'placeholder' || videos[0].type === 'live-placeholder')) {

videos = [];

tabData[currentTab] = [];

currentVideoIndex = 0;

console.log('Удаляем placeholder');

}

let processedFiles = 0;

videoFiles.forEach((file, index) => {

console.log(`Обрабатываем файл: ${file.name}, размер: ${(file.size/1024/1024).toFixed(2)}MB`);

try {

const videoUrl = URL.createObjectURL(file);

console.log(`URL создан для ${file.name}`);

const newVideo = {

id: Date.now() + '-' + index,

url: videoUrl,

title: file.name.replace(/\.[^/.]+$/, ""),

description: `Загружено: ${new Date().toLocaleTimeString()}`,

tags: ['#мое видео', '#загружено'],

file: file,

type: 'video'

};

tabData[currentTab].push(newVideo);

videos.push(newVideo);

console.log(`Видео добавлено: ${newVideo.title}`);

} catch (error) {

console.error(`Ошибка при создании URL для ${file.name}:`, error);

}

processedFiles++;

if (processedFiles === videoFiles.length) {

console.log(`Все файлы обработаны. Всего видео: ${videos.length}`);

hideLoading();

updateVideoDisplay();

updateSwipeIndicators();

hideUploadPanel();

// Reset file input

event.target.value = '';

}

});

}

// Utility functions

function showLoading() {

const loading = document.createElement('div');

loading.id = 'loadingSpinner';

loading.className = 'loading';

loading.innerHTML = '<div class="spinner"></div>';

document.body.appendChild(loading);

}

function hideLoading() {

const loading = document.getElementById('loadingSpinner');

if (loading) {

loading.remove();

}

function showPlayButton(container, videoElement) {

const playBtn = document.createElement('div');

playBtn.className = 'play-overlay';

playBtn.innerHTML = '▶️';

playBtn.onclick = () => {

videoElement.muted = false;

const muteBtn = document.getElementById('muteBtn');

muteBtn.innerHTML = 'ߔ';

videoElement.play().then(() => {

console.log('Видео запущено со звуком');

}).catch(e => {

console.error('Ошибка ручного воспроизведения:', e);

});

playBtn.remove();

};

container.style.position = 'relative';

container.appendChild(playBtn);

}

// Cleanup when page unloads

window.addEventListener('beforeunload', () => {

if (webcamStream) {

webcamStream.getTracks().forEach(track => track.stop());

}

// Cleanup object URLs

videos.forEach(video => {

if (video.url && video.url.startsWith('blob:')) {

URL.revokeObjectURL(video.url);

}

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--primary: #6366f1;

--primary-dark: #4f46e5;

--secondary: #8b5cf6;

--accent: #06b6d4;

--success: #10b981;

--warning: #f59e0b;

--error: #ef4444;

--dark: #0f172a;

--dark-secondary: #1e293b;

--dark-tertiary: #334155;

--light: #f8fafc;

--text: #f1f5f9;

--text-secondary: #94a3b8;

--border: rgba(255, 255, 255, 0.1);

--glass: rgba(255, 255, 255, 0.05);

--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}

body {

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);

color: var(--text);

line-height: 1.6;

min-height: 100vh;

overflow-x: hidden;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header */

.header {

background: rgba(15, 23, 42, 0.8);

backdrop-filter: blur(20px);

border-bottom: 1px solid var(--border);

padding: 20px 0;

position: sticky;

top: 0;

z-index: 100;

}

.header-content {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 32px;

font-weight: 800;

background: linear-gradient(135deg, var(--primary), var(--secondary));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.nav {

display: flex;

gap: 30px;

}

.nav-item {

color: var(--text-secondary);

text-decoration: none;

font-weight: 500;

transition: all 0.3s ease;

position: relative;

}

.nav-item:hover {

color: var(--primary);

transform: translateY(-2px);

}

.nav-item.active::after {

content: '';

position: absolute;

bottom: -25px;

left: 0;

right: 0;

height: 3px;

background: linear-gradient(90deg, var(--primary), var(--secondary));

border-radius: 2px;

}

/* Main Content */

.main {

padding: 40px 0;

}

.grid {

display: grid;

grid-template-columns: 1fr 400px;

gap: 40px;

margin-bottom: 40px;

}

/* Player Section */

.player-section {

background: var(--glass);

backdrop-filter: blur(20px);

border: 1px solid var(--border);

border-radius: 24px;

padding: 30px;

box-shadow: var(--shadow);

}

.player-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

gap: 20px;

}

.player-title {

font-size: 24px;

font-weight: 700;

flex: 1;

}

.player-controls {

display: flex;

gap: 10px;

}

.control-btn {

background: var(--primary);

color: white;

border: none;

padding: 8px 16px;

border-radius: 12px;

cursor: pointer;

font-weight: 500;

transition: all 0.3s ease;

display: flex;

align-items: center;

gap: 8px;

}

.control-btn:hover {

background: var(--primary-dark);

transform: translateY(-2px);

}

.control-btn.secondary {

background: var(--dark-tertiary);

}

.control-btn.secondary:hover {

background: var(--dark-secondary);

}

/* Video Player */

.video-container {

position: relative;

background: #000;

border-radius: 16px;

overflow: hidden;

margin-bottom: 20px;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}

.video-player {

width: 100%;

height: 400px;

background: linear-gradient(45deg, #1a1a1a, #2a2a2a);

display: flex;

align-items: center;

justify-content: center;

color: var(--text-secondary);

font-size: 18px;

position: relative;

}

.video-player video {

width: 100%;

height: 100%;

object-fit: cover;

}

.player-overlay {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.3);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.3s ease;

cursor: pointer;

}

.player-overlay:hover {

opacity: 1;

}

.play-btn {

width: 80px;

height: 80px;

background: rgba(255, 255, 255, 0.9);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 30px;

color: #000;

border: none;

cursor: pointer;

transition: all 0.3s ease;

}

.play-btn:hover {

transform: scale(1.1);

background: white;

}

/* Logo Overlay */

.logo-overlay {

position: absolute;

top: 20px;

right: 20px;

max-width: 120px;

max-height: 80px;

opacity: 0.8;

z-index: 10;

transition: all 0.3s ease;

}

.logo-overlay img {

width: 100%;

height: auto;

border-radius: 8px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}

/* Channel Info */

.channel-info {

display: flex;

justify-content: space-between;

align-items: center;

background: var(--dark-secondary);

padding: 20px;

border-radius: 16px;

margin-bottom: 20px;

}

.channel-details h3 {

font-size: 20px;

font-weight: 600;

margin-bottom: 5px;

}

.channel-status {

display: flex;

align-items: center;

gap: 8px;

}

.status-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--success);

animation: pulse 2s infinite;

}

.status-dot.offline {

background: var(--error);

animation: none;

}

@keyframes pulse {

0% { opacity: 1; }

50% { opacity: 0.5; }

100% { opacity: 1; }

}

/* Share Controls */

.share-controls {

display: flex;

gap: 10px;

margin-top: 20px;

}

.share-btn {

background: var(--accent);

color: white;

border: none;

padding: 12px 20px;

border-radius: 12px;

cursor: pointer;

font-weight: 500;

transition: all 0.3s ease;

display: flex;

align-items: center;

gap: 8px;

}

.share-btn:hover {

transform: translateY(-2px);

box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);

}

.share-btn.tv {

background: var(--secondary);

}

.share-btn.tv:hover {

box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);

}

/* Sidebar */

.sidebar {

display: flex;

flex-direction: column;

gap: 30px;

}

.card {

background: var(--glass);

backdrop-filter: blur(20px);

border: 1px solid var(--border);

border-radius: 20px;

padding: 25px;

box-shadow: var(--shadow);

}

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.card-title {

font-size: 20px;

font-weight: 600;

}

.btn {

background: var(--primary);

color: white;

border: none;

padding: 12px 24px;

border-radius: 12px;

cursor: pointer;

font-weight: 500;

transition: all 0.3s ease;

display: flex;

align-items: center;

gap: 8px;

}

.btn:hover {

background: var(--primary-dark);

transform: translateY(-2px);

}

.btn.secondary {

background: var(--dark-tertiary);

}

.btn.secondary:hover {

background: var(--dark-secondary);

}

/* Form Elements */

.form-group {

margin-bottom: 20px;

}

.form-label {

display: block;

margin-bottom: 8px;

font-weight: 500;

color: var(--text);

}

.form-input, .form-select {

width: 100%;

background: var(--dark-secondary);

border: 1px solid var(--border);

border-radius: 12px;

padding: 12px 16px;

color: var(--text);

font-size: 14px;

transition: all 0.3s ease;

}

.form-input:focus, .form-select:focus {

outline: none;

border-color: var(--primary);

box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

}

/* File Upload */

.file-upload {

border: 2px dashed var(--border);

border-radius: 12px;

padding: 30px;

text-align: center;

transition: all 0.3s ease;

cursor: pointer;

}

.file-upload:hover {

border-color: var(--primary);

background: rgba(99, 102, 241, 0.05);

}

.file-upload.dragover {

border-color: var(--primary);

background: rgba(99, 102, 241, 0.1);

}

.upload-icon {

font-size: 48px;

color: var(--text-secondary);

margin-bottom: 15px;

}

/* Video List */

.video-list {

max-height: 300px;

overflow-y: auto;

}

.video-item {

display: flex;

align-items: center;

gap: 15px;

padding: 15px;

background: var(--dark-secondary);

border-radius: 12px;

margin-bottom: 10px;

cursor: pointer;

transition: all 0.3s ease;

}

.video-item:hover {

background: var(--dark-tertiary);

transform: translateX(5px);

}

.video-item.active {

background: var(--primary);

}

.video-thumbnail {

width: 60px;

height: 40px;

background: var(--dark);

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

font-size: 20px;

}

.video-info {

flex: 1;

}

.video-name {

font-weight: 500;

margin-bottom: 4px;

}

.video-duration {

color: var(--text-secondary);

font-size: 12px;

}

/* Channel List */

.channel-list {

max-height: 400px;

overflow-y: auto;

}

.channel-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px;

background: var(--dark-secondary);

border-radius: 12px;

margin-bottom: 10px;

transition: all 0.3s ease;

}

.channel-item:hover {

background: var(--dark-tertiary);

}

.channel-item.playing {

background: var(--success);

}

.channel-actions {

display: flex;

gap: 8px;

}

.action-btn {

background: none;

border: none;

color: var(--text-secondary);

cursor: pointer;

padding: 8px;

border-radius: 8px;

transition: all 0.3s ease;

}

.action-btn:hover {

background: var(--dark);

color: var(--text);

}

/* Modal */

.modal {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.8);

backdrop-filter: blur(8px);

display: none;

align-items: center;

justify-content: center;

z-index: 1000;

}

.modal.active {

display: flex;

}

.modal-content {

background: var(--dark);

border-radius: 20px;

padding: 30px;

max-width: 500px;

width: 90%;

border: 1px solid var(--border);

box-shadow: var(--shadow);

}

.modal-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.modal-title {

font-size: 24px;

font-weight: 600;

}

.close-btn {

background: none;

border: none;

color: var(--text-secondary);

font-size: 24px;

cursor: pointer;

padding: 8px;

border-radius: 8px;

transition: all 0.3s ease;

}

.close-btn:hover {

background: var(--dark-secondary);

color: var(--text);

}

/* Notifications */

.notification {

position: fixed;

top: 20px;

right: 20px;

background: var(--success);

color: white;

padding: 15px 20px;

border-radius: 12px;

box-shadow: var(--shadow);

z-index: 1001;

transform: translateX(400px);

transition: transform 0.3s ease;

}

.notification.show {

transform: translateX(0);

}

.notification.error {

background: var(--error);

}

.notification.warning {

background: var(--warning);

}

.notification.info {

background: var(--accent);

}

/* Loading */

.loading {

display: inline-block;

width: 20px;

height: 20px;

border: 2px solid var(--border);

border-radius: 50%;

border-top-color: var(--primary);

animation: spin 1s ease-in-out infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* Responsive */

@media (max-width: 768px) {

.grid {

grid-template-columns: 1fr;

}

.nav {

display: none;

}

.video-player {

height: 250px;

}

.logo {

font-size: 24px;

}

/* Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--dark-secondary);

border-radius: 4px;

}

::-webkit-scrollbar-thumb {

background: var(--primary);

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: var(--primary-dark);

}

.checkbox-list {

max-height: 200px;

overflow-y: auto;

border: 1px solid var(--border);

border-radius: 8px;

padding: 10px;

}

.checkbox-item {

display: flex;

align-items: center;

gap: 10px;

padding: 8px;

border-radius: 6px;

transition: background 0.2s;

}

.checkbox-item:hover {

background: var(--dark-secondary);

}

.checkbox-item input[type="checkbox"] {

width: 16px;

height: 16px;

}

</style>

</head>

<body>

<div class="logo">StreamCast</div>

<a href="#" class="nav-item active">Главная</a>

<a href="#" class="nav-item">Каналы</a>

<a href="#" class="nav-item">Библиотека</a>

<a href="#" class="nav-item">Настройки</a>

</nav>

</div>

</header>

<h2 class="player-title">Прямой эфир</h2>

🎨 Логотип

</button>

⚙️ Настройки

</button>

</div>

📺 Телеканал находиться не в сети. Пожалуйста Включите если вы Владелец Канала, свою трансляцию в Студии а если вы зритель то Ожидайте Включения Трансляции Сейчас идут Технические работы!

</div>

</div>

</div>

<h3 id="currentChannelName">Канал не выбран</h3>

<span id="statusText">Офлайн</span>

</div>

<div id="viewerCount">0 зрителей</div>

</div>

🔗 Поделиться

</button>

📺 На ТВ

</button>

⛶ Полный экран

</button>

</div>

<h3 class="card-title">Загрузить видео</h3>

</div>

Нажмите или перетащите видео

</div>

</div>

<h3 class="card-title">Библиотека видео</h3>

<span id="videoCount">0 видео</span>

</div>

Видео не загружены

</div>

<h3 class="card-title">Каналы</h3>

➕ Создать

</button>

</div>

Каналы не созданы

</div>

</main>

<h3 class="modal-title">Создать канал</h3>

</div>

<label class="form-label">Название канала</label>

</div>

<label class="form-label">Режим воспроизведения</label>

<option value="scheduled">По расписанию</option>

<option value="24/7">24/7 режим</option>

</select>

</div>

<label class="form-label">Время начала</label>

</div>

<label class="form-label">Выберите видео для плейлиста</label>

Сначала загрузите видео

</div>

<button type="button" class="btn secondary" onclick="hideCreateChannelModal()">Отмена</button>

<button type="submit" class="btn">Создать канал</button>

</div>

</form>

</div>

<h3 class="modal-title">Настройки логотипа</h3>

</div>

<label class="form-label">Загрузить логотип</label>

</div>

<label class="form-label">Позиция логотипа</label>

<option value="top-right">Верх справа</option>

<option value="top-left">Верх слева</option>

<option value="bottom-right">Низ справа</option>

<option value="bottom-left">Низ слева</option>

</select>

</div>

<label class="form-label">Размер логотипа</label>

<option value="small">Маленький</option>

<option value="medium">Средний</option>

<option value="large">Большой</option>

</select>

</div>

<button type="button" class="btn secondary" onclick="removeLogo()">Удалить</button>

<button type="button" class="btn" onclick="saveLogo()">Сохранить</button>

</div>

<h3 class="modal-title">Настройки плеера</h3>

</div>

<label class="form-label">Качество видео</label>

<option value="auto">Автоматически</option>

</select>

</div>

<label class="form-label">Громкость по умолчанию</label>

</div>

<button type="button" class="btn secondary" onclick="hidePlayerSettingsModal()">Отмена</button>

<button type="button" class="btn" onclick="savePlayerSettings()">Сохранить</button>

</div>

// Global variables

let videos = [];

let channels = [];

let currentChannel = null;

let isPlaying = false;

let currentVideoIndex = 0;

let playlistInterval = null;

let viewerCount = 0;

// Initialize

document.addEventListener('DOMContentLoaded', function() {

setupEventListeners();

loadStoredData();

updateViewerCount();

});

function setupEventListeners() {

// Video upload

const videoInput = document.getElementById('videoInput');

videoInput.addEventListener('change', handleVideoUpload);

// File drop

const fileUpload = document.querySelector('.file-upload');

fileUpload.addEventListener('dragover', handleDragOver);

fileUpload.addEventListener('drop', handleDrop);

fileUpload.addEventListener('dragleave', function(e) {

e.currentTarget.classList.remove('dragover');

});

// Channel form

document.getElementById('createChannelForm').addEventListener('submit', handleCreateChannel);

document.getElementById('playbackMode').addEventListener('change', toggleScheduleFields);

// Logo input

document.getElementById('logoInput').addEventListener('change', previewLogo);

// Video ended event

document.getElementById('mainVideo').addEventListener('ended', playNextVideo);

}

// Video upload handling

function handleVideoUpload(event) {

const files = event.target.files;

if (files.length === 0) return;

showNotification('Загрузка видео...', 'info');

Array.from(files).forEach((file, index) => {

if (!file.type.startsWith('video/')) {

showNotification(`"${file.name}" не является видеофайлом!`, 'error');

return;

}

if (file.size > 100 * 1024 * 1024) { // 100MB limit

showNotification(`"${file.name}" слишком большой! Максимум 100MB`, 'error');

return;

}

const videoId = 'video_' + Date.now() + '_' + index + '_' + Math.random().toString(36).substr(2, 9);

const videoUrl = URL.createObjectURL(file);

const video = {

id: videoId,

file: file,

url: videoUrl,

duration: 'Загрузка...',

size: file.size

};

// Add video immediately

videos.push(video);

updateVideoList();

updateVideoSelection();

// Get duration with better error handling

const videoElement = document.createElement('video');

videoElement.muted = true; // Avoid autoplay issues

videoElement.preload = 'metadata';

const handleSuccess = () => {

try {

const duration = videoElement.duration;

if (duration && !isNaN(duration) && isFinite(duration)) {

video.duration = formatDuration(duration);

} else {

video.duration = '00:00';

}

updateVideoList();

updateVideoSelection();

saveData();

showNotification(`✅ "${file.name}" загружено!`, 'success');

} catch (error) {

console.warn('Duration parsing error:', error);

video.duration = '00:00';

updateVideoList();

showNotification(`⚠️ "${file.name}" загружено (без длительности)`, 'warning');

}

};

const handleError = (error) => {

console.error('Video loading error:', error);

// Don't remove video, just mark as ready

video.duration = '00:00';

updateVideoList();

updateVideoSelection();

showNotification(`⚠️ "${file.name}" загружено`, 'warning');

};

// Set up event listeners

videoElement.addEventListener('loadedmetadata', handleSuccess, { once: true });

videoElement.addEventListener('canplay', () => {

if (video.duration === 'Загрузка...') {

handleSuccess();

}

}, { once: true });

videoElement.addEventListener('error', handleError, { once: true });

// Timeout fallback

setTimeout(() => {

if (video.duration === 'Загрузка...') {

video.duration = '00:00';

updateVideoList();

showNotification(`"${file.name}" загружено (timeout)`, 'warning');

}

}, 5000);

// Set source and try to load

try {

videoElement.src = videoUrl;

videoElement.load();

} catch (error) {

handleError(error);

}

});

event.target.value = '';

}

function handleDragOver(event) {

event.preventDefault();

event.currentTarget.classList.add('dragover');

}

function handleDrop(event) {

event.preventDefault();

event.currentTarget.classList.remove('dragover');

const files = event.dataTransfer.files;

if (files.length === 0) return;

// Create a fake input event

const fakeEvent = {

target: {

files: files,

value: ''

}

};

handleVideoUpload(fakeEvent);

}

// Video list management

function updateVideoList() {

const videoList = document.getElementById('videoList');

const videoCount = document.getElementById('videoCount');

if (videos.length === 0) {

videoList.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Видео не загружены</div>';

videoCount.textContent = '0 видео';

return;

}

videoCount.textContent = `${videos.length} видео`;

videoList.innerHTML = videos.map((video, index) => `

<div class="video-name" title="${video.name}">${video.name}</div>

<div class="video-duration">${video.duration}</div>

</div>

</div>

`).join('');

}

function removeVideo(videoId) {

if (confirm('Удалить это видео из библиотеки?')) {

const videoIndex = videos.findIndex(v => v.id === videoId);

if (videoIndex !== -1) {

// Revoke object URL to free memory

URL.revokeObjectURL(videos[videoIndex].url);

videos.splice(videoIndex, 1);

updateVideoList();

updateVideoSelection();

saveData();

showNotification('Видео удалено', 'success');

}

function updateVideoSelection() {

const videoSelection = document.getElementById('videoSelection');

if (videos.length === 0) {

videoSelection.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Сначала загрузите видео</div>';

return;

}

videoSelection.innerHTML = videos.map(video => `

<label for="video_${video.id}" title="${video.name}">${video.name} (${video.duration})</label>

</div>

`).join('');

}

// Channel management

function showCreateChannelModal() {

document.getElementById('createChannelModal').classList.add('active');

updateVideoSelection();

}

function hideCreateChannelModal() {

document.getElementById('createChannelModal').classList.remove('active');

document.getElementById('createChannelForm').reset();

}

function handleCreateChannel(event) {

event.preventDefault();

const channelName = document.getElementById('channelName').value.trim();

const playbackMode = document.getElementById('playbackMode').value;

const startTime = document.getElementById('startTime').value;

if (!channelName) {

showNotification('Введите название канала!', 'error');

return;

}

const selectedVideos = [];

const checkboxes = document.querySelectorAll('#videoSelection input[type="checkbox"]:checked');

checkboxes.forEach(checkbox => {

const videoId = checkbox.value;

const video = videos.find(v => v.id == videoId);

if (video) {

selectedVideos.push(video);

}

});

if (selectedVideos.length === 0) {

showNotification('Выберите хотя бы одно видео для плейлиста!', 'error');

return;

}

const channel = {

id: 'channel_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9),

mode: playbackMode,

startTime: startTime,

playlist: selectedVideos,

isPlaying: false,

currentVideoIndex: 0,

createdAt: new Date().toISOString()

};

channels.push(channel);

updateChannelList();

saveData();

hideCreateChannelModal();

showNotification(`Канал "${channelName}" создан!`, 'success');

}

function updateChannelList() {

const channelList = document.getElementById('channelList');

if (channels.length === 0) {

channelList.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Каналы не созданы</div>';

return;

}

channelList.innerHTML = channels.map(channel => `

<div>

<div class="video-name">${channel.name}</div>

<div class="video-duration">${channel.mode} • ${channel.playlist.length} видео</div>

</div>

${channel.isPlaying ? '⏸️' : '▶️'}

</button>

</div>

`).join('');

}

function playChannel(channelId) {

const channel = channels.find(c => c.id === channelId);

if (!channel) {

showNotification('Канал не найден!', 'error');

return;

}

if (channel.playlist.length === 0) {

showNotification('В канале нет видео!', 'error');

return;

}

// Stop current channel

if (currentChannel) {

currentChannel.isPlaying = false;

clearInterval(playlistInterval);

}

// Start new channel

currentChannel = channel;

channel.isPlaying = true;

currentVideoIndex = channel.currentVideoIndex || 0;

// Ensure index is valid

if (currentVideoIndex >= channel.playlist.length) {

currentVideoIndex = 0;

channel.currentVideoIndex = 0;

}

updateChannelList();

startPlayback();

updateChannelInfo();

showNotification(`Канал "${channel.name}" запущен!`, 'success');

}

function startPlayback() {

if (!currentChannel || currentChannel.playlist.length === 0) {

showNotification('Нет видео для воспроизведения!', 'error');

return;

}

const video = currentChannel.playlist[currentVideoIndex];

if (!video || !video.url) {

showNotification('Видео недоступно!', 'error');

return;

}

const videoPlayer = document.getElementById('mainVideo');

const noVideoMessage = document.getElementById('noVideoMessage');

// Set up video

videoPlayer.src = video.url;

videoPlayer.style.display = 'block';

noVideoMessage.style.display = 'none';

// Handle video load

videoPlayer.addEventListener('loadeddata', function onLoaded() {

videoPlayer.removeEventListener('loadeddata', onLoaded);

if (currentChannel.mode === '24/7') {

videoPlayer.play().then(() => {

isPlaying = true;

updatePlayButton();

updateChannelStatus(true);

}).catch(error => {

console.error('Play error:', error);

showNotification('Ошибка воспроизведения', 'error');

});

} else if (currentChannel.mode === 'scheduled') {

schedulePlayback();

}

});

videoPlayer.addEventListener('error', function(e) {

console.error('Video error:', e);

showNotification('Ошибка загрузки видео', 'error');

});

// Load the video

videoPlayer.load();

}

function schedulePlayback() {

const now = new Date();

const [hours, minutes] = currentChannel.startTime.split(':');

const scheduledTime = new Date();

scheduledTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);

if (scheduledTime <= now) {

scheduledTime.setDate(scheduledTime.getDate() + 1);

}

const timeUntilStart = scheduledTime.getTime() - now.getTime();

showNotification(`Трансляция начнется в ${currentChannel.startTime}`, 'info');

setTimeout(() => {

const videoPlayer = document.getElementById('mainVideo');

videoPlayer.play();

isPlaying = true;

updatePlayButton();

showNotification('Трансляция началась!', 'success');

}, timeUntilStart);

}

function playNextVideo() {

if (!currentChannel || currentChannel.playlist.length === 0) return;

currentVideoIndex = (currentVideoIndex + 1) % currentChannel.playlist.length;

currentChannel.currentVideoIndex = currentVideoIndex;

const video = currentChannel.playlist[currentVideoIndex];

if (!video || !video.url) {

showNotification('Следующее видео недоступно!', 'error');

return;

}

const videoPlayer = document.getElementById('mainVideo');

videoPlayer.src = video.url;

videoPlayer.load();

videoPlayer.addEventListener('loadeddata', function onLoaded() {

videoPlayer.removeEventListener('loadeddata', onLoaded);

videoPlayer.play().then(() => {

isPlaying = true;

updatePlayButton();

}).catch(error => {

console.error('Next video play error:', error);

showNotification('Ошибка воспроизведения следующего видео', 'error');

});

saveData();

}

function deleteChannel(channelId) {

if (confirm('Удалить канал?')) {

channels = channels.filter(c => c.id !== channelId);

if (currentChannel && currentChannel.id === channelId) {

stopCurrentChannel();

}

updateChannelList();

saveData();

showNotification('Канал удален', 'success');

}

function editChannel(channelId) {

// Implement channel editing

showNotification('Функция редактирования в разработке', 'info');

}

function stopCurrentChannel() {

if (currentChannel) {

currentChannel.isPlaying = false;

currentChannel = null;

clearInterval(playlistInterval);

const videoPlayer = document.getElementById('mainVideo');

const noVideoMessage = document.getElementById('noVideoMessage');

videoPlayer.pause();

videoPlayer.style.display = 'none';

noVideoMessage.style.display = 'block';

updateChannelInfo();

updateChannelStatus(false);

updateChannelList();

}

// Player controls

function togglePlayPause() {

const videoPlayer = document.getElementById('mainVideo');

if (videoPlayer.style.display === 'none') return;

if (isPlaying) {

videoPlayer.pause();

isPlaying = false;

} else {

videoPlayer.play();

isPlaying = true;

}

updatePlayButton();

}

function updatePlayButton() {

const playButton = document.getElementById('playButton');

playButton.textContent = isPlaying ? '⏸️' : '▶️';

}

function playVideo(videoId) {

const video = videos.find(v => v.id == videoId);

if (!video || !video.url) {

showNotification('Видео не найдено!', 'error');

return;

}

stopCurrentChannel();

const videoPlayer = document.getElementById('mainVideo');

const noVideoMessage = document.getElementById('noVideoMessage');

videoPlayer.src = video.url;

videoPlayer.style.display = 'block';

noVideoMessage.style.display = 'none';

videoPlayer.addEventListener('loadeddata', function onLoaded() {

videoPlayer.removeEventListener('loadeddata', onLoaded);

videoPlayer.play().then(() => {

isPlaying = true;

updatePlayButton();

updateChannelStatus(true);

}).catch(error => {

console.error('Single video play error:', error);

showNotification('Ошибка воспроизведения видео', 'error');

});

videoPlayer.load();

document.getElementById('currentChannelName').textContent = video.name;

// Highlight selected video

document.querySelectorAll('.video-item').forEach(item => {

item.classList.remove('active');

});

document.querySelector(`[onclick="playVideo('${videoId}')"]`)?.classList.add('active');

}

// Logo management

function showLogoSettings() {

document.getElementById('logoModal').classList.add('active');

}

function hideLogoModal() {

document.getElementById('logoModal').classList.remove('active');

}

function previewLogo(event) {

const file = event.target.files[0];

if (!file) return;

if (!file.type.startsWith('image/')) {

showNotification('Файл должен быть изображением!', 'error');

return;

}

const reader = new FileReader();

reader.onload = function(e) {

const logoImage = document.getElementById('logoImage');

logoImage.src = e.target.result;

};

reader.readAsDataURL(file);

}

function saveLogo() {

const logoInput = document.getElementById('logoInput');

const logoPosition = document.getElementById('logoPosition').value;

const logoSize = document.getElementById('logoSize').value;

if (!logoInput.files[0]) {

showNotification('Выберите файл логотипа!', 'error');

return;

}

const logoOverlay = document.getElementById('logoOverlay');

const logoImage = document.getElementById('logoImage');

// Apply position

logoOverlay.style.top = 'auto';

logoOverlay.style.bottom = 'auto';

logoOverlay.style.left = 'auto';

logoOverlay.style.right = 'auto';

switch(logoPosition) {

case 'top-left':

logoOverlay.style.top = '20px';

logoOverlay.style.left = '20px';

break;

case 'top-right':

logoOverlay.style.top = '20px';

logoOverlay.style.right = '20px';

break;

case 'bottom-left':

logoOverlay.style.bottom = '20px';

logoOverlay.style.left = '20px';

break;

case 'bottom-right':

logoOverlay.style.bottom = '20px';

logoOverlay.style.right = '20px';

break;

}

// Apply size

switch(logoSize) {

case 'small':

logoOverlay.style.maxWidth = '80px';

logoOverlay.style.maxHeight = '60px';

break;

case 'medium':

logoOverlay.style.maxWidth = '120px';

logoOverlay.style.maxHeight = '80px';

break;

case 'large':

logoOverlay.style.maxWidth = '160px';

logoOverlay.style.maxHeight = '100px';

break;

}

logoOverlay.style.display = 'block';

hideLogoModal();

showNotification('Логотип сохранен!', 'success');

}

function removeLogo() {

const logoOverlay = document.getElementById('logoOverlay');

logoOverlay.style.display = 'none';

document.getElementById('logoInput').value = '';

hideLogoModal();

showNotification('Логотип удален', 'success');

}

// Player settings

function showPlayerSettings() {

document.getElementById('playerSettingsModal').classList.add('active');

}

function hidePlayerSettingsModal() {

document.getElementById('playerSettingsModal').classList.remove('active');

}

function savePlayerSettings() {

const quality = document.getElementById('videoQuality').value;

const volume = document.getElementById('defaultVolume').value;

const videoPlayer = document.getElementById('mainVideo');

videoPlayer.volume = volume / 100;

hidePlayerSettingsModal();

showNotification('Настройки сохранены!', 'success');

}

// Sharing and casting

function shareStream() {

if (!currentChannel) {

showNotification('Сначала запустите канал!', 'error');

return;

}

const url = `${window.location.origin}${window.location.pathname}?channel=${currentChannel.id}`;

if (navigator.share) {

navigator.share({

title: `StreamCast - ${currentChannel.name}`,

text: `Смотрите канал "${currentChannel.name}" в прямом эфире!`,

url: url

});

} else {

navigator.clipboard.writeText(url).then(() => {

showNotification('Ссылка скопирована в буфер обмена!', 'success');

});

}

function castToTV() {

if (!currentChannel) {

showNotification('Сначала запустите канал!', 'error');

return;

}

// Check for Chromecast availability

if ('presentation' in navigator) {

const presentationRequest = new PresentationRequest([window.location.href]);

presentationRequest.start()

.then(connection => {

showNotification('Трансляция на ТВ началась!', 'success');

})

.catch(error => {

showNotification('Не удалось подключиться к ТВ', 'error');

});

} else {

showNotification('Функция Cast недоступна в этом браузере', 'warning');

}

function toggleFullscreen() {

const videoContainer = document.querySelector('.video-container');

if (!document.fullscreenElement) {

videoContainer.requestFullscreen().then(() => {

showNotification('Полноэкранный режим включен', 'success');

});

} else {

document.exitFullscreen().then(() => {

showNotification('Полноэкранный режим выключен', 'success');

});

}

// UI updates

function updateChannelInfo() {

const channelName = document.getElementById('currentChannelName');

const statusDot = document.getElementById('statusDot');

const statusText = document.getElementById('statusText');

if (currentChannel) {

channelName.textContent = currentChannel.name;

} else {

channelName.textContent = 'Канал не выбран';

}

function updateChannelStatus(online) {

const statusDot = document.getElementById('statusDot');

const statusText = document.getElementById('statusText');

if (online) {

statusDot.classList.remove('offline');

statusText.textContent = 'В эфире';

} else {

statusDot.classList.add('offline');

statusText.textContent = 'Офлайн';

}

function updateViewerCount() {

viewerCount = Math.floor(Math.random() * 100) + 1;

document.getElementById('viewerCount').textContent = `${viewerCount} зрителей`;

// Update every 30 seconds

setTimeout(updateViewerCount, 30000);

}

function toggleScheduleFields() {

const scheduleGroup = document.getElementById('scheduleGroup');

const playbackMode = document.getElementById('playbackMode').value;

if (playbackMode === 'scheduled') {

scheduleGroup.style.display = 'block';

} else {

scheduleGroup.style.display = 'none';

}

// Utility functions

function formatDuration(seconds) {

if (!seconds || isNaN(seconds) || !isFinite(seconds)) {

return '00:00';

}

const mins = Math.floor(seconds / 60);

const secs = Math.floor(seconds % 60);

return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;

}

function formatFileSize(bytes) {

if (bytes === 0) return '0 B';

const k = 1024;

const sizes = ['B', 'KB', 'MB', 'GB'];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];

}

function showNotification(message, type = 'success') {

const notification = document.getElementById('notification');

notification.textContent = message;

notification.className = `notification ${type} show`;

setTimeout(() => {

notification.classList.remove('show');

}, 3000);

}

// Data persistence

function saveData() {

const data = {

videos: videos.map(v => ({

id: v.id,

duration: v.duration,

size: v.size

})),

channels: channels

};

// In real app, save to server

console.log('Data saved:', data);

}

function loadStoredData() {

// In real app, load from server

console.log('Loading stored data...');

}

// Handle URL parameters for shared channels

function handleURLParams() {

const urlParams = new URLSearchParams(window.location.search);

const channelId = urlParams.get('channel');

if (channelId) {

// Wait a bit for channels to load

setTimeout(() => {

const channel = channels.find(c => c.id === channelId);

if (channel) {

playChannel(channelId);

} else {

showNotification('Канал не найден по ссылке', 'error');

}

}, 1000);

}

// Initialize URL handling

window.addEventListener('load', handleURLParams);

</script>

</body>

</html>

<!DOCTYPE html>

<head>

// Глобальные переменные

let currentNickname = '';